These small tips can save you large amount of time when dealing with states in a complex React application.

The stale state issue is common in React. The tips we are going to discuss will help you solve this issue in different scenarios.

Some common scenarios where this issue occurs

Here are a list scenarios when you get stale states in your code:

• Inside a closure.
• Inside an event handler callback.
• Inside asynchronous function callback.

Here is a small project which uses asynchronous function callback and notice how the state update is not working. It is all because of stale state inside the callback function.

Technique 1: Using function updates

This is very simple technique which allows you to deal with stale states. Use this technique in scenarios like: asynchronous callback, or inside a closure.

Here is how it works: Pass a function to the useState dispatcher. Passing a function to the dispatcher will allow you to access previous state value. The previous state value will be passed to the function when executed. To set the new state, you just need to return the new value from the function.

Here is the update version of same app above. It just have a small change i.e. a function is passed to the useState dispatcher. Notice how it's working perfectly within asynchronous callback.

You can see we have used useRef here. The benefit of using useRef is that it allows you to keep track of a value without re-rendering. Since the object returned by useRef will be attached to component instance for it's entire life, it is a great way to make sure only one setInterval callback is created.

Technique 2: Using latest ref

This technique is very useful in scenarios such as: event handler callback. Here is how it works: You create a useRef object instance by passing your callback. Since the object created by useRef is created only once for the life of a component, it allows you to keep track of any value without re-rendering.

You can see in the above app that the useRef is used to store a callback. The useLayoutEffect is used to register and remove previous callback. useLayoutEffect works same as useEffect except that here the callback passed is called before the change happened is painted on the browser screen.

Technique 3: Using callback memoization

This technique is very similar to previous one. Instead of storing the callback in ref.current , you pass that inside useCallback. The useCallback will return a memoized reference to the callback. Similar to useEffect you can pass a list of dependencies here as well. The advantage of this technique is that you can execute a set of things when the callback reference changes.

These simple techniques are very useful which will allow you to prevent issues in your application due to stale state data.

Read this post and more on my Typeshare Social Blog

Go composable: Build apps faster like Lego

Bit is an open-source tool for building apps in a modular and collaborative way. Go composable to ship faster, more consistently, and easily scale.

→ Learn more

Build apps, pages, user-experiences and UIs as standalone components. Use them to compose new apps and experiences faster. Bring any framework and tool into your workflow. Share, reuse, and collaborate to build together.

Help your team with:

→ Micro-Frontends

→ Design Systems

→ Code-Sharing and reuse

→ Monorepos