React函数组件使用useState时避免传递新函数作为props的方案问询

Great question—this is one of the most common gotchas when transitioning from class components to functional components with hooks, and it’s totally solvable! Let’s walk through the main strategies to avoid passing new function references on every render, along with when to use each one.

1. Use useCallback to Cache Function References #

The useCallback hook is built specifically for this scenario: it lets you memoize a function so it only gets recreated when its dependencies change.

React guarantees that the setter function from useState (like setValue here) is stable across renders—meaning it doesn’t change unless the component unmounts and remounts. Since your valueChanger only relies on setValue, we can cache it with an empty dependency array:

import React, { useState, useCallback } from 'react'
import IDontWantToRerender from './heavyComputations';

export default function IneffectiveFunctionalComponent() {
  const [value, setValue] = useState(1);
  
  // Memoize the function—only recreated if dependencies change (none here!)
  const valueChanger = useCallback(() => {
    setValue(Math.random());
  }, []);

  return (
    <IDontWantToRerender valueChanger={valueChanger} value={value} />
  )
}

Critical Companion: React.memo for the Child Component #

useCallback alone won’t stop the child from rerendering—you need to wrap the child component with React.memo to make it check if props have actually changed before rerendering:

// heavyComputations.js
import React, { memo } from 'react';

const IDontWantToRerender = memo(({ valueChanger, value }) => {
  // Your heavy computation/rendering logic here
  console.log('Heavy component rerendered (only when value changes!)');
  return (
    <div>
      <p>Current value: {value}</p>
      <button onClick={valueChanger}>Change Value</button>
    </div>
  );
});

export default IDontWantToRerender;

2. Use useReducer for Complex State Logic #

If your state updates grow more complex (or if you find yourself memoizing multiple functions), useReducer is a robust alternative. The dispatch function returned by useReducer is always stable across renders, so you can pass it directly to the child without worrying about new references:

First, define your reducer and initial state:

import React, { useReducer } from 'react'
import IDontWantToRerender from './heavyComputations';

// Reducer handles state updates based on action types
const valueReducer = (state, action) => {
  switch (action.type) {
    case 'CHANGE_VALUE':
      return Math.random();
    default:
      return state;
  }
};

export default function IneffectiveFunctionalComponent() {
  const [value, dispatch] = useReducer(valueReducer, 1);

  // Dispatch is stable—no memoization needed!
  return (
    <IDontWantToRerender 
      dispatch={dispatch} 
      value={value} 
    />
  )
}

Then update the child to use the dispatch function:

// heavyComputations.js
import React, { memo } from 'react';

const IDontWantToRerender = memo(({ dispatch, value }) => {
  return (
    <div>
      <p>Current value: {value}</p>
      <button onClick={() => dispatch({ type: 'CHANGE_VALUE' })}>
        Change Value
      </button>
    </div>
  );
});

export default IDontWantToRerender;

3. Pass the Setter Directly (When Possible) #

If your child component only needs to call the state setter without custom logic, you can skip creating a wrapper function entirely and pass setValue directly. Since setValue is stable, this won’t trigger unnecessary rerenders:

import React, { useState } from 'react'
import IDontWantToRerender from './heavyComputations';

export default function IneffectiveFunctionalComponent() {
  const [value, setValue] = useState(1);

  // Pass setValue directly—no wrapper function needed!
  return (
    <IDontWantToRerender setValue={setValue} value={value} />
  )
}

Child component:

// heavyComputations.js
import React, { memo } from 'react';

const IDontWantToRerender = memo(({ setValue, value }) => {
  return (
    <div>
      <p>Current value: {value}</p>
      <button onClick={() => setValue(Math.random())}>Change Value</button>
    </div>
  );
});

export default IDontWantToRerender;

Key Notes to Remember #

• Don’t overuse useCallback: It adds a tiny overhead to memoize the function, so only use it when the child is memoized and the function would otherwise cause unnecessary rerenders.
• Dependencies matter: If your function uses other component-scoped variables (like value), include them in the useCallback dependency array to ensure the function has access to the latest values.
• React.memo does shallow comparisons: If your props are objects/arrays, you might need to use useMemo to memoize those, or pass a custom comparator to memo.

内容的提问来源于stack exchange，提问作者sergeysmolin