In React, whenever we are working with any data, we always use the state for storing that data which may be a string, number or any complex object.

This is fine if you are using that state while rendering the component or If you want to do something when the state value changes but If you are using that state just for storing data and not using it for rendering or not passed as a prop to other components then you should not use state.

Because whenever the state value changes, React will re-render the component and also all its child components will get re-rendered.

Take a look at the below code:

const App = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <Header />
      <input type="button" onClick={handleClick} value="Increment" />
      <Content />
    </div>
  );
};

Here, we are storing the count in the state but we are not using it in render and also not passing it to other components as a prop.

You might be using it just to check how many clicks happened or for some other purpose. But this will make your app re-render for every button click just because you used state.

Here's a Code Sandbox Demo.

Here's a Preview link for the above Code Sandbox Demo.

If you open the above preview link and open your react dev tools, then in the components tab click the wheel icon and select the checkbox which says Highlight updates when components render, then you will be able to see when and which components get re-rendered.

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

Check out the below Gif to see it in action.

If we have some components which render a large amount of data for example users list then just a single click will re-render the component for every user which is not good. So React provides another way of handling that.

If you want to store some data but don’t want to re-render the app, then you can use the useRef hook provided by React.

Take a look at the same code written using useRef.

const App = () => {
  const inputRef = useRef(0);

  const handleClick = () => {
    inputRef.current++;
    console.log("count", inputRef.current);
  };

  return (
    <div>
      <Header />
      <input type="button" onClick={handleClick} value="Increment" />
      <Content />
    </div>
  );
};

The inputRef in the above code contains a current property that holds the actual value of the ref.

As you can see, the count is incrementing but the app is not re-rendering.

Here's a Code Sandbox Demo.

Here's a Preview link for the above Code Sandbox Demo.

If you are using a class component instead of a functional component then you can use React.createRef method to create a ref.

Here's a Code Sandbox Demo.

Here's a Preview link for the above Code Sandbox Demo.

Conclusion

You should only use state when you're using it in the render method or passing it as a prop.

If you want to store data just for keeping track of some value, you should use ref instead of the state.

This will avoid extra re-rendering because re-rendering many times might cause performance issue which may not be visible for smaller applications but it will affect large application where large data processing is happening.

Thanks for reading!

Check out my recently published Mastering Redux course.

In this course, you will build 3 apps along with food ordering app and you'll learn:

• Basic and advanced Redux
• How to manage the complex state of array and objects
• How to use multiple reducers to manage complex redux state
• How to debug Redux application
• How to use Redux in React using react-redux library to make your app reactive.
• How to use redux-thunk library to handle async API calls and much more

and then finally we'll build a complete food ordering app from scratch with stripe integration for accepting payments and deploy it to the production.

Want to stay up to date with regular content regarding JavaScript, React, Node.js? Follow me on LinkedIn.