6 Pro Tips from React Developers

Share this article

6 Pro Tips from React Developers

We’ve teamed up with Open SourceCraft to bring you 6 Pro Tips from React Developers.

If you’re new to React, you could benefit from learning from the success—and failures—of React developers who’ve learned valuable lessons about the framework.

Tip 1: Use functional components

Cam Jackson

If you don’t need internal state or lifecycle methods on your component, use a functional component instead. A functional component is a pure JavaScript function that accept props as its argument and returns a React element.

Benefits of functional components:

  • Less code
  • Easier to understand
  • The component is stateless, so you avoid accidentally storing state on a component you shouldn’t
  • The component is simpler to test
  • There’s no this binding
  • It’s easier to see where and when to extract smaller components

Tip 2: Keep your components small

Randy Coulman

Small components are easier to:

  • Read
  • Test
  • Maintain
  • Reuse

Extracting components will make your app more organized, more modular, and more structurally sound. Keep Tip 1 in mind and extract blocks of code into functional components whenever possible.

Tip 3: Understand how to handle this

Cory House

The first way to handle this is to not handle it at all and use a functional component instead (see why that’s Tip No. 1?).

But if you are using an ES6 class, you’ll need to bind this manually since React doesn’t autobind the functions inside that component.

There are several methods for doing so.

  1. Bind in render
  2. Use an arrow function in render
  3. Bind in constructor
  4. Use arrow function in class property

Check out the video to see these methods in practice.

Tip 4: Use a function in setState, not an object

Sophia Shoemaker

According to the React docs, React does not guarantee that state changes are applied immediately.

Therefore, reading this.state right after calling setState() is a potential pitfall because this.state may not be what you think it is.

So instead of updating state with an object, update it with a function to avoid this potential pitfall.

Tip 5: Utilyze prop-types

Adam Jahr

prop-types is a library for typechecking props and can help prevent bugs by ensuring you are using the right datatypes for your props. This is an external package that you can install through npm or otherwise. Simply import the package, then add propTypes to your component and typeset accordingly. If you want the prop to be required, just add .isRequired.

Tip 6: Use React Developer tools

Brian Gates

With React Developer Tools, available as a Google Chrome and Firefox extension, as well as a standalone app for other environments, you can quickly view your component hierarchy, inspect and edit a component’s props and state, and invoke methods on a component within the DevTools.

Gregg PollackGregg Pollack
View Author

Gregg is a serial entrepreneur, host of Open SourceCraft. Founder of Envy Labs, Code School, Starter Studio, Orlando Ruby Users Group, BarCamp Orlando, and the Orlando Tech Events newsletter. He's passionate about startups, explaining things on the internet, fostering self-awareness, and being a father.

Adam JahrAdam Jahr
View Author

Adam is a coding Instructor, React developer, music producer, audiovisual artist, VR enthusiast. You'll find Adam in his element when he's fusing sleek UI with smooth UX.

Angela MolinaAngela Molina
View Author

Angela has been fascinated by and trawling the web since dial-up was the only way to connect. Now she's helping you learn (even more) as the Production Manager at SitePoint Premium.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form