Valeriu Paloş // milk, cookies and segfaults

Remember last value in React functional components

Sometimes it can be very useful to save previous values of props (or state) in a React component. Perhaps this is easier to be imagined in a class component, but in a functional component, less so.

However, we can use the useRef() React hook to achieve that quite efficiently.

Less talk, more code (typescript)…

const someFunctionalComponent = (p: {index: number}) => {
  // Keep the last positive value around.
  const lastPositiveIndexRef = React.useRef<number>(Math.max(p.index, 0));
  if (p.index >= 0) {
    lastPositiveIndexRef.current = p.index;
  }
  
  // Here, the ref will always have the last positive input.
  const positiveIndex = p.index >= 0 ? p.index : lastPositiveIndexRef.current;
  return <span>I'm only allowing positive numbers to be shown: {positiveIndex}</span>
}

Here’s a working sample (JSFiddle).

I found the following comment from the React documentation, quite illuminating…

However, useRef() is useful for more than the ref attribute. It’s handy for keeping any mutable value around similar to how you’d use instance fields in classes.

Enjoy!