Предотвращение повторного рендеринга с использованием обратного вызова в дочернем компоненте всякий раз, когда изменяется состояние в родительском компоненте.

Question

У меня возникают некоторые проблемы с частым повторным отображением компонентов всякий раз, когда родительский компонент обновляет свое состояние.

У меня есть простой User компонент, который отображает имя. Компонент App использует useState для хранения нескольких пользователей. Всякий раз, когда выполняется обратный вызов onClick, все компоненты перерисовываются, это снижает производительность. Я попытался использовать useCallback для предотвращения этого. Код можно запустить здесь . Как я могу предотвратить повторное отображение других компонентов, когда родитель обновляет состояние пользователя?

const App = () => {
  const [users, setUsers] = useState([
    { id: 1, name: "Cory" },
    { id: 2, name: "Meg" },
    { id: 3, name: "Bob" }
  ]);

  const deleteUser = useCallback(id => {
    setUsers(users => users.filter(user => user.id !== id));
  }, []);

  const renderUser = user => {
    return <User key={user.id} user={user} onClick={deleteUser} />;
  };

  return (
    <div>
      <h1>Users</h1>
      <ul>{users.map(renderUser)}</ul>
    </div>
  );
};

Пользователь

const User = props => {
  const onDeleteClick = () => {
    props.onClick(props.user.id);
  };

  console.log(`${props.user.name} just rendered`);
  return (
    <li>
      <input type="button" value="Delete" onClick={onDeleteClick} />
      {props.user.name}
    </li>
  );
};

Answer 1

Вы можете использовать React.memo в User Компоненте, чтобы остановить повторную визуализацию Компонента.

Рабочая ссылка: https://codesandbox.io/s/no-arrow-func-render-eziql

Надеюсь, это поможет!

Answer 2

используйте React.memo в компоненте ваших детей

export default React.memo(User);