Accessing Previous Props and State with React Hooks

React's functional components and hooks revolutionized how we build user interfaces, but they introduced a subtle challenge: unlike class components with lifecycle methods, functional components don't provide a built-in way to access previous prop or state values. When you need to compare a current value against what it was before--a common requirement for animations, transitions, or detecting actual changes--the solution isn't immediately obvious.

This guide explores the patterns and custom hooks that solve this problem elegantly, leveraging React's useRef hook to preserve previous values without triggering unnecessary re-renders. Understanding these patterns is essential for building sophisticated React applications that require change detection and comparison logic.

What you'll learn:

• Why accessing previous values matters in React applications
• How useRef provides non-reactive storage for tracking values
• Patterns for storing previous state and props
• Building a reusable usePrevious custom hook
• Practical applications including animations and form tracking
• Performance considerations for optimal implementation

Why Access Previous Values?

Understanding when and why you need previous values helps clarify which pattern to use.

Common Use Cases

Animation Direction Detection

• Determine if an element should grow or shrink based on value changes
• Create smooth transitions that respond to user input direction
• Animate between states with awareness of the transition path

Form Change Tracking

• Detect when a user has modified a field from its initial value
• Enable/disable save buttons based on actual changes
• Show visual indicators when values have been altered

API Request Optimization

• Only fetch new data when the query actually changes
• Prevent duplicate requests for the same data
• Implement debounced searching with change detection

Scroll and Window Tracking

• Calculate scroll direction and distance
• Detect when window dimensions actually change
• Implement parallax effects with velocity awareness

The useRef Hook: Non-Reactive Storage

The solution to tracking previous values lies in understanding a key property of useRef: changing a ref's current value does NOT trigger a re-render.

How useRef Works

const ref = useRef();
// ref returns an object with a .current property
// ref.current can be assigned any value
ref.current = 'previous value';
// Reading is just as simple
console.log(ref.current); // 'previous value'

Why Refs Are Perfect for Previous Values

The ref object itself remains stable across renders--only the .current property changes, and it does so without affecting the render cycle. This makes refs ideal for storing values you need to remember but don't want to display.

Key insight: When you store a value in ref.current, it stays there until you explicitly change it, and the component won't re-render just because you updated the ref.

For more on React hooks patterns, see our guide on React form validation with Formik and Yup which demonstrates practical hook combinations in real-world applications.

Storing Previous State Values

For state values, you can use a simple direct assignment pattern:

Direct Assignment Pattern

import { useState, useRef } from 'react';

function Counter() {
 const [count, setCount] = useState(0);
 const prevCountRef = useRef();

 const increment = () => {
 // Store current value as previous before updating
 prevCountRef.current = count;
 setCount(c => c + 1);
 };

 return (
 <div>
 <p>Previous: {prevCountRef.current}</p>
 <p>Current: {count}</p>
 <button onClick={increment}>Increment</button>
 </div>
 );
}

How it works:

1. Create a ref to hold the previous state value
2. Before calling the state setter, update the ref with the current value
3. The ref.current always contains the value from the previous render
4. No useEffect needed because we're updating synchronously before the state change

Multiple State Values

When dealing with multiple pieces of state, create separate refs for each:

const [username, setUsername] = useState('');
const [email, setEmail] = useState('');
const prevUsernameRef = useRef();
const prevEmailRef = useRef();

This keeps tracking logic clean and maintains separation of concerns.

Tracking Previous Props

Props require a different approach because they arrive before the component renders. Direct assignment in the component body would capture stale values due to closures.

The useEffect Pattern

import { useEffect, useRef } from 'react';

function UserProfile({ user }) {
 const prevUserRef = useRef();

 useEffect(() => {
 // After render, store current user as previous
 prevUserRef.current = user;
 }, [user]); // Runs after user prop changes

 return (
 <div>
 <p>Previous: {prevUserRef.current?.name || 'None'}</p>
 <p>Current: {user.name}</p>
 </div>
 );
}

Why useEffect is Necessary

1. Timing: Props arrive before the component renders, so direct assignment would capture the old value
2. Closure behavior: React's closure semantics mean values captured in the render body refer to the initial values
3. Post-render capture: useEffect runs after the DOM update, giving us access to the actual rendered value
4. Dependency tracking: The dependency array ensures we capture each prop change

Handling Complex Prop Types

For objects and arrays, be mindful of reference equality:

useEffect(() => {
 prevUserRef.current = user;
}, [user]); // Uses shallow comparison for dependency tracking

If your object references don't change but internal values do, consider using useMemo for stable references or implementing deep comparison logic.

For data fetching patterns that work well with prop-based change detection, see our guide on Next.js data fetching with getServerSideProps and getStaticProps.

Creating a Reusable usePrevious Hook

Rather than repeating the ref + useEffect pattern throughout your codebase, encapsulate it in a custom hook.

The usePrevious Implementation

import { useRef, useEffect } from 'react';

function usePrevious(value) {
 const ref = useRef();

 useEffect(() => {
 ref.current = value;
 }, [value]);

 return ref.current;
}

Usage in Components

function Counter() {
 const [count, setCount] = useState(0);
 const previousCount = usePrevious(count);

 return (
 <div>
 <p>Previous: {previousCount}</p>
 <p>Current: {count}</p>
 <button onClick={() => setCount(c => c + 1)}>Increment</button>
 </div>
 );
}

Benefits of the custom hook:

• One-line integration in any component
• Works identically for state and props
• Clear, semantic API: just pass a value, get the previous one
• Returns undefined on first render (expected behavior)
• Easy to test and maintain

With Props

function UserCard({ user }) {
 const prevUser = usePrevious(user);

 if (prevUser && prevUser.id === user.id && prevUser.name !== user.name) {
 console.log('User name changed!');
 }

 return <div>{user.name}</div>;
}

Advanced: Returning Both Previous and Current

Some scenarios benefit from having immediate access to both values:

function usePreviousAndCurrent(value) {
 const ref = useRef();

 useEffect(() => {
 ref.current = value;
 }, [value]);

 return { prev: ref.current, current: value };
}

Practical Applications

Form Dirty Tracking:

function EditableField({ initialValue, onSave }) {
 const [value, setValue] = useState(initialValue);
 const { prev: prevInitial, current: currentValue } = usePreviousAndCurrent(value);
 const hasChanged = value !== initialValue;
 const didJustChange = prevInitial !== undefined && value !== prevInitial;

 return (
 <div>
 <input value={value} onChange={e => setValue(e.target.value)} />
 <button disabled={!hasChanged} onClick={() => onSave(value)}>
 Save
 </button>
 {didJustChange && <span className="notification">Value changed!</span>}
 </div>
 );
}

API Optimization:

function SearchResults({ query }) {
 const { prev: prevQuery, current: currentQuery } = usePreviousAndCurrent(query);
 const shouldFetch = query.length >= 3 && prevQuery !== query;

 useEffect(() => {
 if (shouldFetch) {
 fetchResults(query);
 }
 }, [query, shouldFetch]);
}

Performance Considerations

Why Refs Are Efficient

1. No re-render overhead: Changing ref.current doesn't trigger component re-renders, so there's no render cycle cost
2. Stable object: The ref object is created once and persists across renders
3. Fast access: Reading and writing .current is essentially free
4. Minimal effect runs: Only the useEffect dependency array can cause effect re-runs

Performance Pitfalls to Avoid

Object Dependencies:

// Bad - creates new object every render
useEffect(() => {
 prevRef.current = user;
}, [user]); // user object reference changes frequently

// Good - memoize for stable reference
const stableUser = useMemo(() => user, [user.name, user.email]);
useEffect(() => {
 prevRef.current = stableUser;
}, [stableUser]);

Comparison with Alternatives:

When to Be Careful

• Avoid using objects/arrays directly in useEffect dependencies when possible
• Memoize stable values that don't need to trigger effects
• Consider useMemo for computed values
• For complex nested objects, implement deep comparison or use libraries like use-deep-compare-effect

Summary

Accessing previous props and state values in React functional components requires a different approach than class components, but the solution is elegant and performant:

1. useRef provides non-reactive storage that persists across renders without triggering re-renders
2. Direct ref assignment works for state when you control the update timing
3. useEffect + ref is needed for props to capture values after render
4. Custom hooks like usePrevious encapsulate the pattern for clean, reusable code
5. Refs are the most performant solution with minimal overhead

Common patterns include animation direction detection, form change tracking, and API request optimization. The usePrevious hook pattern has become a standard solution in the React community for this common requirement.

Next steps:

• Add usePrevious to your component utility library
• Identify components in your codebase that could benefit from previous value tracking
• Consider creating specialized hooks for common patterns like usePreviousChange or useDirtyForm

For more advanced React development techniques, explore our web development services or learn about AI-powered automation solutions that can enhance your applications.

Sources

1. LogRocket: How to access previous props or state with React Hooks - Comprehensive guide covering useRef patterns, custom hooks, and practical examples
2. Telerik: How to Access Previous Props & State Values with React Hooks - Detailed tutorial with code examples for state and props tracking