When It's Not Good to Use React State

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:

https://gist.github.com/myogeshchavan97/9df47569092e0579e33945419a8bc94a

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 preview link about 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.

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.

https://gist.github.com/myogeshchavan97/a8504e5c9582443db0dcc46831f15bba

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

Starting with ES6, there are many useful additions to JavaScript like

ES6 Destructuring
Import and Export Syntax
Arrow functions
Promises
Async/await
Optional chaining operator and a lot more.

You can learn everything about all the ES6+ features in detail in my Mastering Modern JavaScript book.

Check out free preview contents of the book here.

Also, you can check out my free Introduction to React Router course to learn React Router from scratch.

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

When It's Not Good to Use React State

Comments (2)

More from this blog

How to Build a Task Management App Using Next.js 16 and Prisma 7

React's/Next.js Worst Week Ever! Just Got Worse

React Performance Anti-Patterns: 5 Mistakes That Kill Your App's Speed!

How to Access Both Company and Personal GitHub Repositories On The Same Machine

How to Build Multi-Language React Apps with Internationalization (i18n)

Conclusion

Thanks for reading

Command Palette

Comments (2)

More from this blog

Conclusion

Thanks for reading