How to persist values between Re-Renders using React useRef()

When working with React, managing state and ensuring values persist between re-renders can be crucial. One powerful tool in our arsenal is the useRef() hook. In this blog post, we'll explore how to leverage useRef() for maintaining values across re-renders, bringing simplicity and efficiency to your React applications.

Why useRef()?

The useRef() hook is primarily known for its role in accessing and interacting with DOM elements directly. However, its ability to persist values between renders makes it a versatile choice for managing non-reactive data that doesn't trigger a re-render when changed.

The Magic of useRef

Creating a Ref

To get started, let's create a ref using useRef():

import React, { useRef } from 'react';

const MyComponent = () => {
  const myRef = useRef(initialValue);
  // ...
};

Keeping Values Across Renders

Now, let's see how we can use useRef() to persist a value between renders:

const MyComponent = () => {
  const countRef = useRef(0);

  const incrementCount = () => {
    countRef.current += 1;
    console.log(`Count: ${countRef.current}`);
  };

  return (
    <div>
      <p>Click the button to increase count:</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

Conclusion

In conclusion, useRef() isn't just for manipulating the DOM; it's a handy tool for maintaining values between renders in a React functional component. Whether you're dealing with counters, timers, or any non-reactive data, useRef() can streamline your code and enhance performance.

So, next time you find yourself needing to persist a value without triggering a re-render, reach for useRef(). Happy coding!

Persisting values with useRef() is like having a secret stash in your code - accessible, reliable, and always there when you need it.