# 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](https://codesandbox.io/s/invalid-use-of-state-imnyu).
Here's a [Preview link](https://imnyu.csb.app/) 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](https://codesandbox.io/s/using-ref-to-manage-data-fgmkz).
Here's a [Preview link](https://fgmkz.csb.app/) 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](https://codesandbox.io/s/using-ref-to-manage-data-vh490).
Here's a [Preview link](https://vh490.csb.app/) 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](https://modernjavascript.yogeshchavan.dev/) book.**
> Check out free preview contents of the book [here](https://www.freecodecamp.org/news/learn-modern-javascript/).
Also, you can check out my **free** [Introduction to React Router](https://yogeshchavan1.podia.com/react-router-introduction) 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](https://www.linkedin.com/in/yogesh-chavan97/).
[
](https://bit.ly/3w0DGum)
[
](https://www.buymeacoffee.com/myogeshchavan97)