React Hooks: Почему плохая практика - передавать функции установленного состояния в дочерний компонент?

Question

У меня есть вопрос, чтобы улучшить моё понимание реактивных хуков. Говорят, что если кто-то передает установленные функции состояния или зацепляет детей, это плохая практика. Поэтому нужно просто передать функцию-обработчик дочернему элементу, который находится в родительском элементе, а затем использовать там установленные функции состояния. Когда я столкнулся с этим после разработки многих рабочих частей приложения, я хотел бы знать, почему этого следует избегать, поскольку он отлично работал для меня.

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

Заранее спасибо!

Answer 1

Передача функции установки состояния ребенку не является плохой практикой, это полностью приемлемо. Фактически, я бы сказал, что делать это:

const MyComponent = () => {
  const [state, setState] = useState();

  return <Child onStateChange={setState} />
}

const Child = React.memo(() => {...});

лучше, чем

const MyComponent = () => {
  const [state, setState] = useState();

  return <Child onStateChange={(value) => setState(value)} />
}

const Child = React.memo(() => {...});

, потому что в первом примере компонент Child не перерисовывается всякий раз, когда MyComponent рендерится. Во втором примере всякий раз, когда MyComponent выполняет рендеринг, он воссоздает пользовательскую функцию установки состояния, которая заставляет компонент Child выполнять рендеринг без необходимости. Чтобы избежать этого, вам нужно было бы обернуть свою пользовательскую функцию установки в React.useCallback, чтобы предотвратить ненужные повторные рендеринг, который является просто еще одним произвольным слоем хуков.