8 React Tips & Tricks

Every frontend developer implements React in their own way. Some write their handler functions straight into their JSX, others write separate functions to handle all of that extra logic. Whether you’re a seasoned React developer or just getting started, I’ve made a list of 8 tips and tricks to one-up your code.

1. React can assign keys to your children, no need to think of creative ways to come up with them

A key is necessary when creating a list of elements in React. Keys provide an identity to these elements. When rendering an array of elements with the required keys, you might want to simply do something like so:

{someData.map(item => <div key={item.id}>Hello!</div>)}

What if I told you there was a built-in method which automatically assigns the keys for you? Enter React.Children.toArray().

{React.Children.toArray(someData.map(item => <div>Hello!</div>)}

Side tip: Do not use the map() index.

2. Fragment shorthand

The React fragment has saved us from having additional DOM elements lying around, but the shorthand can save you a little bit of time (and space) here and there.

// Long
<React.Fragment></React.Fragment>

// Short
<></>

When using the shorthand, just make sure that your linter is set up to not scream at you for using it or that your formatter incorrectly treats the shorthand and creates a random jumbled mess out of your code.

3. Keep components small

Keeping your components small can help save you from a bug-tracking-spaghetti-code-scrolling nightmare. The smaller your components, the easier they are to test and the easier it will be to keep your components focused on what it is they should really do. If your components starts to get large, reassess the logic and see if you can’t move some of that into utilities, hooks, or even break that component up into other components.

4. Omitting a prop value defaults to true

Just like writing an attribute with no value for an element in HTML defaults to true, omitting the prop value for a component will default to true.

The React documentation shows that both lines below pass the autocomplete prop as true.

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

However, the React team warns against using this.

5. Keep your prop names simple

There are some crazy prop names out there, but luckily if your components stay small your prop names usually follow suite.

There’s a general naming convention followed amongst some of the most popular React component libraries that have chosen to keep their boolean props simple: by not using a prefix. I’ve written a separate post about naming your boolean variables here which can help you when naming these types of props.

6. You don’t need super() in your constructor

If you’re not doing anything with your props in your constructor, you can safely omit your super() from your constructor. Do heed the derived state warnings, though.

7. Keep your logic out of your JSX

If you’ve got some logic going on in your JSX, whether it is a callback or the rendering of some elements, defining a separate function can go a long way for readability.

// Headache later, polluted with logic
<input onClick={event => {
  // Some logic here
}}/>

// No headache later, easy to find and follow
handler = event => {
  // Some logic here
}

<input onClick={handler}/>

8. Functional components can be called as functions

This is certainly a trick and one that fellow developers might hate you for if you use it in a public project.This strictly applies to functional components.

<SomeComponent/> => SomeComponent()

There you have it! #8 is purely a party trick and if you want to show it off make sure to tell others that it actually saves render time (not by anything significant). Please feel free to suggest other tips or tricks you find useful in the comments.

Summarize