React Best Practices 2022: Featuring 20+ Experts

Introduction: React.js Tips to Build UI Faster

This year React.js surpassed jQuery as the most commonly used web development framework, according to the developer survey conducted by StackOverflow. According to npm trends, there were ~350 million downloads of React.js in October 2021 alone. Wow, that’s a lot! No wonder today’s newest developers are scrambling to learn it, as knowing React code makes you better at JavaScript, which holds nearly 90% of the web development market today.

As React.js continues to grow, there is no way to speed up react development in sprints. Why spend time coding the super simple elements when you could use that time to work on more challenging, more complex problems? That’s where we come in. In this article, we will share some React best practices shared by some of the best React.js developers out there.

Introducing CopyCat

Here at CopyCat, we strive to help you build React.js UI faster than anybody else. Generate React code that helps eliminate sprint delays and design inconsistencies. So, we asked 20 highly successful developers ‘What is your top strategy to speed up Reactjs development? Unquestionably, they were kind enough to share their React best practices with us. We then combined 20 clever tips into an infographic and blog post.

Convert Figma to React with CopyCat

Onto the React Best Practices

These experts’ exclusive tips and best practices will help you improve and reflect on your React.js development. Each person provides a unique and exciting perspective on their way to speed up react development, and we suggest that you experiment with a few and find what works best for you. Every developer has a way of writing code, but it doesn’t hurt to explore some best practices.

You’ll find tips about react component hierarchy, parent component, react hooks, load data, and more. Best of all, they’re completely FREE for your perusal. Additionally, we will not even ask for your email to download this content. We think that this best react practices information must be available to all for FREE.

Without further ado, let’s get right into it!

What is your top strategy to speed up Reactjs development? Expert React Best Practices to Speed up UI Development [Infographic]

<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2F6vl3isYJ4kLnQZdQ9FJsHB%2FCopycat%3Fnode-id%3D3585%253A9451" allowfullscreen></iframe>

1. Debbie O’Brien

Head Developer Advocate at Bit | Twitter: @debs_obrien

“Build Component Driven where you components are not tied to your React application meaning you can scale easily and build more applications by re-using already built components. Allow teams to own features and build components that can be versioned individually, tested individually and shipped individually without having to mange dependencies.”

2. Colby Fayock

Developer Advocate at Cloudinary | Twitter: @colbyfayock

“My goto is using a web framework like Next.js or Gatsby so I don’t have to think about configuration and can immediately get productive with solving the unique challenges of my application.”

3. Tanisha Sabherwal

Engineer at JP Morgan | Twitter: @tanishaaa03

“As basic as it may sound, the only startegy that works for speeding up React Development is being thorough with the basics. I did the mistake of jumping right onto JS libraries and frameworks. Hence, having good command over vanilla JS helps you master any tech involving JS. To speed things up, go through the basics, understand how React works under the hood and enjoy debugging.”

4. Arisa Fukuzaki

DevRel Engineer at StoryBlok | Twitter: @arisa_dev

“Minimize the number of expensive DOM operations to update the UI. React.js has already several techniques to do that, such as minified production build to test, avoiding reconciliation to minimize re-rendering time, etc.”

5. Josh Goldberg

Staff Frontend Developer at Codeacademy | Twitter: @JoshuaKGoldberg

“Use a component library to avoid rewriting code. It can be something big and premade like Material UI or just a folder of shared buttons, inputs, and so on — just as long as you don’t need to rewrite the same things over and over again.

Consistency in visual designs is key. Users can tell when your application is a haphazardly strung together collection of slightly different, unnecessarily customized components. Try to think of your designs as a flexible suggestion of premade components positioned near each other on the page — not as a set of pixels to exactly match. There should only be one representation of each semantic concept in your components: e.g. primary button, secondary button, short text input, long text input, and so on. DRY!”

6. Rob Richardson

Software Developer | Twitter: @rob_rich

One word: Typescript. 😀

7. Alex Johansson

Creator of tRPC | Twitter: @alexdotjs

“Making everyone work as a full-stack developer by using a monorepo with TypeScript on both ends and reusing code and API contracts.

Either by using GraphQL and code generation or swagger to automatically create typesafe hooks, or use something like tRPC or Blitzjs to completely eliminate the need of an API contract.

Also, using Next.js helps a lot.”

8. Facundo Giuliani

Developer Relations Engineer at Storyblok | Twitter: @facundozurdo

“I try to look for existing tools, packages and boilerplates that can help me with my work. I use Next.js to extend React behavior with more features like server-side rendering, static site generation, and more.”

9. Thomas Weibenfalk

Developer & Content Creator | Twitter: @weibenfalk | Youtube: Weibenfalk

“The thing I always do is to try to keep things simple, always. I don’t add stuff until I need it.
Also, it’s good to have some snippets in VS Code to generate boilerplates for you. For example, scaffolding out a simple component in React.

I think it’s also important to really understand what you’re doing and learn stuff from the ground up. That will save you a lot of time in the future and increase your speed.

But it’s not always about speed either, it’s about quality. ;)”

10. Amusa Abayomi

Creator of Viable Whim | Twitter: @paulos_ab | YouTube: Paulos Ab

“My strategy to speed up React.js development is by using Frameworks with React.js

Such as Next.js, next.js handles routing and enables routing to be fast and it also does code-splitting by rendering only the required codes for the route and many more.”

11. Aleksi Meldo

Designer and Developer | Twitter: @maindi

“My strategy speeding up React.js and JS development in general is: Let everyone have time for personal learning (courses and new frameworks etc.) and test the learnings in side projects.”

12. Krasimir Tsonev

Senior Engineer and Author of 50 Tips on Javascript | Twitter: @KrasimirTsonev

“My strategy is always first identifying what state needs to be managed. I build my components around that. Next I focus on the composition. I’m trying to find the balance between writing too many components and writing less but complex ones.”

13. Shivay Lamba

Software Engineer | Twitter: @HowDevelop

“1. Use Dev Tools: Dev Tools allow you to easily check the properties of your React component, state changes etc. Utilize React Dev Tools chrome extension: Using the React Dev Tools you can easily check the individual React components and their properties. Use Redux Dev Tools Chrome extension: Helps to check any state changes that might be taking place in the React application.

2. Optimizing Performance with Webpack: Webpack allows you to configure the code by minimizing it and turning it into production-ready.

3. React Profiling: React Profiling allows you to see render times for components and allows you to check time required for viewing props and states of components.”

14. Mahesh Haldar

Full Stack Developer at Dkatalis | Twitter: @MaheshHaldar

“Write clean code, high-quality test cases, automate all the manual steps, and be ethical towards your code. Abstain from ‘I will improve this later’ excuses, improve it now, later is far away.”

15. Naren Yellavula

Software Engineer | Twitter: @Narenarya3

“My two cents on speeding up React.js development: keep in mind what react state you need right from the beginning. Having a mental model of how your application behaves saves lots of modifications to components”.

16. Jennifer Fu

UI Lead at Domino Data Lab | LinkedIn: Jennifer Fu | Medium: Jennifer Fu

“For React.js development, I could not emphasize more on reusability with well defined common components. They are centralized data structures and algorithms, which provide consistency and maintainability. The productivity magic builds upon custom hooks, high-order components, or simply common components.”

17. Harsh Patel

Full Stack JavaScript Developer | Twitter: @Harshpatel1408

“Faster development process means boosting your development of a React.js app along with best performance. You can’t compromise with performance when you want to develop an app rapidly. Here are some strategies to keep in mind:

Using production build to test.
Avoid reconciliation.
Reduce state mutations.
Load resources only when you need.”

18. Prosper Otemuyiwa

Co-founder of Eden | Twitter: @unicodeveloper

“Use Sourcegragh; it is a code search tool that allows you to search all of your public and private code. It’s a search engine for code! With Sourcegraph, you can easily search for common usage of React API and libraries examples. It delves straight right into the code sample without wasting time.”

19. Liran Tal

Director of Developer Advocacy at Snyk | Twitter: @liran_tal

“When it comes to frontend security, React has a lot of good defaults to save developers from Cross-site Scripting attacks, but there are some APIs that aren’t well protected by default. I’m not talking about the famous dangerouslySetInnerHTML, but about other sinks that can introduce these vulnerabilities. For example, the JXS output for the Anchor HTML element will not sanitize the values passed to the href attribute. Developers may also find frustration in dealing with many 3rd-party open source libraries’ vulnerabilities, which require triage and risk assessment based on the context and other application-specific factors. That said, with open source making up upwards of 90% of codebases, they pose a real threat that mandates developers and maintainers to look out for their application’s security hygiene with regards to vulnerable dependencies and take proactive measures to fix and upgrade as soon as possible.”

20. Radoslav Stankov

Head of Engineering at ProductHunt | Twitter: @rstankov

“Use TypeScript Clearly defined rules for code organization and structure. Have explicit rules on how to structural components. Avoid maintaining and configuring webpack/babel directly. Instead, abstract it with something like Next.js Focus on having reusable components and understandable error messages and states Constantly improve your setup – observe where your teammates are struggling, where most reported bugs are, and build tools around those places.”

21. Souvik Basu

Senior Software Engineer at Microsoft | Twitter: @souvikbasu

“Do not overuse useMemo and useCallback. Premature optimization can hit back badly as there is a housekeeping task needed to maintain and scan through the cache. Use only where applicable like while creating very long lists of items or performing complex calculations.”

22. Paritosh Gupta

CEO of CopyCat | Twitter: @paritoshgupta_ | LinkedIn: Paritosh Gupta

“Communicate with your designers about your existing components and make sure you’re both on the same page regarding common design tokens.”

Conclusion

Finally, we hope you found these React best practices tips helpful and will help you iterate and improve as a react developer. Moreover, if you liked this article, share it with your developer peers and friends!

What was your favorite react development tip? Will you implement any of these best practices in your next react project or react app? Let us know in the comments below.

Interesting Reads From Our Blogs:

• Reactjs Build Production: Creating a Deployment Build That Optimizes Performance
• Impress Your Users Using The Top 8 React Animation Libraries
• React Strict Mode: A Guide on Using it in your Application
• React Hooks: Understanding How React useRef Works