React Tutorial The Top 10 React Best Practices

React Best Practices #4 – Put local styles in a const called ‘styles’

There are four different methods to style a React component. You can pick and choose the best technique for any situation, even combining techniques within the same component — they’re not incompatible. So, which should you choose in a given situation?

Styles that are local to a component should be written as JavaScript objects inside the component. This makes them A) easy to find for someone maintaining your code and B) encapsulated — fully local — to this component so that a change here won’t affect any other components. Heck, it can’t affect other components.

<div style={styles.productCard}><MoreJSXHere /></div>

Then at the bottom of the file, add this:

const styles = {
productCard: {
width: “50vw”,
boxShadow: “2px 5px 7px #8790A0”,
}
}

React Best Practices #8 – Stop writing class-based components

Look, I get it. We OO developers like using classes. And since React will allow you to write your components as class-based components, Java/C# developers lean toward write classes. We need to resist this urge.

Class-based components are more complex and harder for you and your teammates to understand at a glance. They’re less abstract.

Your teammates will thank you when they’re having to maintain your components if you write them as functional components.

A few years ago we were forced to write class-based components any time we needed to use lifecycle methods or maintain state.

With the introduction of React hooks, we’re no longer required to write classes. So don’t.

And how exactly do we handle state then? Here’s how …

React Best Practices #9 – Embrace the useState hook

“I need class-based components to maintain state!”, someone says. That’s no longer true with useState. For performance reasons, React components are immutable but using the useState hook provides a way to rerender a component after having changed a variable (aka. “state”).

import { useState } from ‘react’;
export function Foo() {
const [ someData, setSomeData ] = useState(“”);
return (
<>
<p>{ someData }</p>
<button onClick={() => setSomeData(Math.random())}>Go</button>
</>
}

In the code above, setSomeData is a function that will re-draw this component after having assigned the someData variable. Clicking the <button> will put a random number in someData and then redraw.

This is a simple example, I know. But useState is that easy.

React Best Practices #10 – Master the useEffect hook

Lifecycle events are the other reason we needed class-based components. Before React 16.8, we were forced to write class-based components if we needed to tap into the lifecycle events like ComponentDidMount and ComponentDidUpdate.

Fortunately today, useEffect fills that need by allowing us to simulate React lifecycle events.

I’ve got to warn you; useEffect isn’t easy to get your mind around, but it is almost a requirement in modern React development.

Here’s a quick reference.

To run the first time the component renders (componentDidMount)

useEffect( () => {
   // Your setup code goes here.
}, [] );

To run each time the component updates (componentDidUpdate)

useEffect( () => {
    // Your updating code goes here.
});

To run just before the component exits (componentWillUnmount)

useEffect(() => {
     // returned function will be called on component unmount
     return () => {
    // Your cleanup code goes here
     }
}, []);

Bonus! React Best Practices #11 – Use React fragments

Quiz for React developers: What do we do when we get this message?

Failed to compile.

./src/App.js
Line 18:  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?

Many developers will wrap their components in a <div> to create a single root component. This is not wrong but it is also not best.

Best practice is to use a React fragment like this:

<>
<Component1 />
<Component2 />
</>

React fragments look like you typed in a <div> or <section> or whatever but forgot the words. It is a set of empty angle brackets.

The beauty of React fragments is that 1) they’re not rendered, thus making your code a little smaller.2) they communicate your intent better to other developers.

Because they can’t be styled nor have attributes, we know that these are only here to wrap your component and for no other reason.

Bonus! React Best Practices #12 – Memoize components

When you ‘memoize’ a function, you run it once and remember its result so that you never have to re-run it. It can often help with performance.

Little known fact: the term “memoize” was coined when an MIT PhD candidate misspelled it in her dissertation. She was trying to say “memorize” but the term stuck.

Okay, that’s a total lie. But it makes for a good story, right?

We often write and run inner functions in React components. Every time we re-render this component, the function runs again, usually with the same results. It’s a waste of time. To prevent that, memoize the function with the useMemo().

const result = useMemo(() => someFunc(foo), [foo]);

This says that on every re-render, if foo hasn’t changed from the previous render, don’t rerun it. Instead use the value from the last render.

Now this is cool and all but larger gains can be found when memoizing entire React components:

function OptimizedParent(prop1) {
const [state1, setState1] = useState({});

const memoizedComponent = useMemo(
() => <SomeComponent prop1={prop1} />, [prop1]);
return (
<>
<SomeComponent1 />
{ memoizedComponent }
<SomeComponent2 />
</>
);
}

In this example code, the memoized component will only be re-rendered if prop1 changes. If not, it is remembered from the prior render and merely … umm … placed.

Final Words on React Best Practices

We live in a technological era that moves fast, and this is especially true when you are to compete with the competitors in your business.

In this react tutorial, we discussed some React best practices that reflect the current state of React in the 2^nd half of 2021.

Stay ahead of the changes! Visit our  React Training page and learn to leverage the power of React in our hands-on React Training courses.

React training with Web Age covers all of the essentials of React and will give you the skills and foundation you need to work with this powerful library.

Our live instructor-led React Classroom Training courses will take you from the basics all the way up to building sophisticated, scalable web applications. Get started

today!

React Programming in 2021

React Native Training Course: Building Mobile Apps with JavaScript

MERN Training