<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Asm8F-asBkUcxxrIECE2aQ.jpeg" /><figcaption>Photo by <a href="https://unsplash.com/@jeshoots?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">JESHOOTS.COM</a> on <a href="https://unsplash.com/s/photos/clean?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption></figure><blockquote>You should know the <a href="https://medium.com/swlh/react-fundamentals-673722a18bf8">React fundamentals</a> and <a href="https://www.typescriptlang.org/">Typescript</a> before reading this article.</blockquote>Since you worked as a team, the codes were not developed by just you. You or your team should make the codes simple to understand.Readability is crucial.When it comes to getting your team to work faster, readability is important. Assume that your code is bad. Nobody understands. So, what happens if someone needs to fix something that relies on your code? They came to you and asked you what you did on this part. You told them. And what if you can’t make it? Can you imagine the consequences?So the readability matters when you worked as a team.The Clean Code Fundamentals should be seen on <a href="https://www.geeksforgeeks.org/7-tips-to-write-clean-and-better-code-in-2020/">GreeksforGreeks</a><h3>Prioritise imports.</h3>Something that many people ignore. but is as important as any other.Before prioritize<figure><img alt="Not prioritize imports" src="https://cdn-images-1.medium.com/max/1024/1*UuCAujgFfx7J3fyWuxFSZA.png" /></figure>After prioritized<figure><img alt="Prioritized imports" src="https://cdn-images-1.medium.com/max/1024/1*nfjvtQEqtM5_yGB-n-Cxfg.png" /></figure>As you see, it’s easier to read than before. We clearly separate the import by<ul><li>Third party’s types of import (Should have type to know this is type import).</li><li>Third party’s imports</li><li>Local imports are grouped by directory.</li><li>Local types of imports (Should have type to know this is type of import).</li></ul>You should separate the type and not type import like<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vC3x3GhKsMymPQgclACsaA.png" /><figcaption>Counter’s component</figcaption></figure><h3>Move complicated and shared functionality to React Hook.</h3>To avoid unnecessary sections of complicated functionality, you should move them to React Hook instead.For example, fetching the user data by giving the loading and error state.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*etNYvuUJpQ2JtVNWXVQTJA.png" /><figcaption>Fetch user on user page</figcaption></figure>Use React Hook<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*UnBSob4dqOnog53l4RD97w.png" /></figure>Usage<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Kh-MpvZ9cuZVp9vL5NYaOQ.png" /></figure>Much better.<h3>Conclusion</h3>As you can see, these are clean code tips I’ve used in React. By following these simple tips, your code will become more readable and cleaner.P.S. This is my first article and English is not my primary language, so if you feel weird about my article, Feel free to suggest. Thank you for reading my article. I hope it is useful for you.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=8988e1a7aa53" width="1" height="1" alt="">