How to fix Warning: Props should not change between renders in React

ReactINTERMEDIATEMEDIUM

This warning indicates that component props are being mutated or recreated on every render, breaking React's optimization mechanisms. It typically occurs when using React.memo or hooks with object/array props that have unstable references.

What this error means

This warning appears when React detects that props passed to a component are changing their reference between renders even though their content might be the same. React relies on reference equality checks for performance optimizations, particularly with React.memo and hooks like useEffect, useMemo, and useCallback. When objects, arrays, or functions are created inline or defined inside a component's render body, they get a new reference on every render. This breaks React's ability to determine if props have actually changed, causing unnecessary re-renders and hook re-executions. This is particularly problematic with React.memo wrapped components, which only do shallow prop comparisons by default. If a parent component passes a newly created object or function as a prop, the memoized child will re-render every time despite having functionally identical props.

How to fix "Warning: Props should not change between renders"

1Identify components with unstable prop references

Use React DevTools Profiler to identify components that re-render frequently. Look for components wrapped in React.memo or using hooks with object/array dependencies.

tsx

// Problem: Object created on every render
function ParentComponent() {
  return <MemoizedChild config={{ theme: 'dark', size: 'large' }} />;
}

const MemoizedChild = React.memo(({ config }) => {
  return <div>Theme: {config.theme}</div>;
});

Check your console for warnings about exhaustive dependencies in useEffect or other hooks.

2Memoize object and array props with useMemo

Wrap object and array props in useMemo to maintain stable references across renders. Only recreate them when their actual values change.

tsx

import { useMemo } from 'react';

function ParentComponent() {
  // Good: Stable reference unless dependencies change
  const config = useMemo(() => ({
    theme: 'dark',
    size: 'large'
  }), []); // Empty array = never changes

  return <MemoizedChild config={config} />;
}

// With dynamic values
function ParentWithState({ userPreference }) {
  const config = useMemo(() => ({
    theme: userPreference,
    size: 'large'
  }), [userPreference]); // Only recreate when userPreference changes

  return <MemoizedChild config={config} />;
}

3Wrap callback props with useCallback

Use useCallback to memoize function props and prevent them from being recreated on every render.

tsx

import { useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  // Problem: New function reference on every render
  // const handleClick = () => setCount(prev => prev + 1);

  // Good: Stable function reference
  const handleClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, []); // No dependencies needed with functional updates

  return <MemoizedButton onClick={handleClick} />;
}

// With dependencies
function ParentWithDeps({ userId }) {
  const handleSave = useCallback((data) => {
    saveToAPI(userId, data);
  }, [userId]); // Recreate only when userId changes

  return <MemoizedForm onSave={handleSave} />;
}

4Move static values outside component scope

For values that never change, define them outside the component to avoid recreating them on every render.

tsx

// Good: Defined once, stable reference
const DEFAULT_CONFIG = {
  theme: 'dark',
  size: 'large',
  timeout: 5000,
};

const VALIDATION_RULES = ['required', 'email', 'minLength'];

function MyComponent() {
  return (
    <>
      <ConfiguredChild config={DEFAULT_CONFIG} />
      <ValidatedInput rules={VALIDATION_RULES} />
    </>
  );
}

This is the most efficient solution for truly static data.

5Fix useEffect dependency arrays

Ensure all dependencies in useEffect are properly memoized if they're objects, arrays, or functions.

tsx

function MyComponent({ config }) {
  // Problem: Runs on every render if config is unstable
  // useEffect(() => {
  //   applyConfig(config);
  // }, [config]);

  // Solution 1: Memoize the config in parent component
  // Solution 2: Destructure only the values you need
  useEffect(() => {
    const { theme, size } = config;
    applyConfig(theme, size);
  }, [config.theme, config.size]); // Depend on primitives

  // Solution 3: Use a ref for values you don't want to trigger effects
  const configRef = useRef(config);
  useEffect(() => {
    configRef.current = config;
  });

  useEffect(() => {
    // Use configRef.current, no dependency needed
    applyConfig(configRef.current);
  }, []); // Only run once
}

6Use custom comparison function with React.memo

For complex props, provide a custom comparison function to React.memo instead of relying on shallow equality.

tsx

const MemoizedComponent = React.memo(
  ({ config, data }) => {
    return <div>{config.theme} - {data.length} items</div>;
  },
  (prevProps, nextProps) => {
    // Return true if props are equal (skip re-render)
    // Return false if props are different (re-render)
    return (
      prevProps.config.theme === nextProps.config.theme &&
      prevProps.config.size === nextProps.config.size &&
      prevProps.data.length === nextProps.data.length
    );
  }
);

Use this approach when you need deep equality checks or want to compare specific properties.

How to fix Warning: Props should not change between renders in React

What this error means

Typical symptoms

Common causes

How to fix "Warning: Props should not change between renders"

Advanced notes

Related errors

Official resources & further reading