Опустить функцию реквизит из списка зависимостей в React.useEffect? - PullRequest
Новая
       11

Опустить функцию реквизит из списка зависимостей в React.useEffect?

1 голос
/ 08 ноября 2019

У меня есть следующий блок кода: 

function foo({ bar, func }) {
  useEffect(() => {
    func(bar)
  }, [func, bar])

  ....
}

Является ли это шаблоном, запрещающим включать func в список зависимостей для React.useEffect? У меня сложилось впечатление, что определение функции для func почти никогда не меняется. Пожалуйста, поправьте меня, если я ошибаюсь.

1 Ответ

2 голосов
/ 08 ноября 2019

Это зависит от значения func, которое, очевидно, инициализируется в родительском компоненте

Но если предположить, что func установлен на постоянную функцию, которая никогда не изменится (что в основном имеет место), то нетнужно добавить это здесь, вы можете просто оставить bar и удалить func из второго аргумента useEffect

Однако здесь плохая практика, в вашем коде, если func установлен на функциюэто увеличивает bar, например, 

const func = (bar) => bar + 1;

Это приведет к бесконечному запуску useEffect, потому что каждый раз, когда bar изменение, useEffect будет срабатывать и увеличивать bar снова и так далее.

Если вам интересно, можно ли когда-нибудь изменить func

Я приведу пример родительского компонента, который func изменится при нажатии кнопки. 

import React, {useState} from "react";

const ParentComponent = () => {
    const increment = bar => bar+1;
    const decrement = bar => bar-1;

    const [func, setFunc] = useState(increment);

    return <div>
         //When this button is clicked, `func` value will be changed
         <button onClick={() => setFunc(decrement)}/>

         // This is your component
         <foo func={func}/>
    </div>
}
...