Instantly share code, notes, and snippets.

What would you like to do?
import { useState, useEffect, useRef } from 'react';
// Usage
function App() {
// State value and setter for our example
const [count, setCount] = useState(0);
// Get the previous value (was passed into hook on last render)
const prevCount = usePrevious(count);
// Display both current and previous count value
return (
<h1>Now: {count}, before: {prevCount}</h1>
<button onClick={() => setCount(count + 1)}>Increment</button>
// Hook
function usePrevious(value) {
// The ref object is a generic container whose current property is mutable ...
// ... and can hold any value, similar to an instance property on a class
const ref = useRef();
// Store current value in ref
useEffect(() => {
ref.current = value;
}, [value]); // Only re-run if value changes
// Return previous value (happens before update in useEffect above)
return ref.current;

This comment has been minimized.

ianobermiller commented Nov 9, 2018

Love all the comments in the custom hook function!


This comment has been minimized.

ritwickdey commented Nov 14, 2018

Just an optimization, not sooooo inportant

useEffect(() => {
    ref.current = value;
  }, [value]); // only run if and only if value is changed

This comment has been minimized.


gragland commented Nov 20, 2018

@ritwickdey Thanks, code updated!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment