usePrevious

Stores the previous state or props.

- Create a custom hook that takes a `value`.
- Use the `useRef()` hook to create a `ref` for the `value`.
- Use the `useEffect()` hook to remember the latest `value`.

```jsx
const usePrevious = value => {
  const ref = React.useRef();
  React.useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};
```

```jsx
const Counter = () => {
  const [value, setValue] = React.useState(0);
  const lastValue = usePrevious(value);

  return (
    <div>
      <p>
        Current: {value} - Previous: {lastValue}
      </p>
      <button onClick={() => setValue(value + 1)}>Increment</button>
    </div>
  );
};

ReactDOM.render(<Counter />, document.getElementById('root'));
```


usePrevious react Code Snippet in 2024

Last Updated: 16 December 2024

Stores the previous state or props.

react snippet similar to usePrevious For You in December 2024

Use async

Use body scroll lock

Use click inside

Use click outside

Use component did mount

Use component did update

Use component will unmount

Use copy to clipboard

Use debounce

Use default

Use delayed state

Use effect once

Use error

Use event listener

Use fetch

Use form

Use get set

Use hash

Use hover

Use intersection observer

Use interval

Use isomporphic effect

Use key press

Use local storage

Use map

Use media query

Use merge state

Use mutation observer

Use navigator on line

Use on global event

Use on window resize

Use on window scroll

Use persisted state

Use portal

Use previous

Use request animation frame

Subscribe to our Newsletter

Company

Follow Us

Subscribe to our Newsletter