在 React.useMemo 的依赖数组中放什么

Question

Consider situation:

const App = ({ data = [], users = [] }) => {
  const selectedId = React.memo(() => {
    return data.find((id) => id === 'someId');
  }, [data]);

  const userIds = React.memo(() => {
    return users.map(({ id }) => id);
  }, [users]);

  const finalIds = React.memo(() => {
    return userIds.find((id) => id === selectedId);
  }, []);

  return finalIds.toString();
}

What should I put in the dependency array in finalIds ?

Should I:

• provide the props used by variables that are used here, eg - [data, users]
• provide the variables that are used here, eg - [selectedId, userIds]
• keep it empty

Answer 1

You put any variables that you use inside the calculation. In other words, [selectedId, userIds] . When those variables change, you need to repeat the calculation, or finalIds will be stale.

If you use eslint, i'd recommend using eslint-plugin-react-hooks . It can spot if you're missing a variable from the dependency array and fill them in automatically.