Когда использовать useEffect без deps? - PullRequest
Новая
       7

Когда использовать useEffect без deps?

1 голос
/ 01 мая 2019

Почему и когда мне следует использовать Effect, если у меня нет deps?

В чем разница между (от React docs ): 

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

А без использования эффекта? 

function usePrevious(value) {
  const ref = useRef();

  ref.current = value;

  return ref.current;
}

1 Ответ

1 голос
/ 01 мая 2019

Разница в этих двух методах заключается в том, что useEffect запускается после завершения цикла рендеринга, и, следовательно, ref.current будет содержать предыдущие значения, тогда как во втором методе ваш ref.current будет обновлен немедленно и, следовательно, предыдущий всегда будет равно текущему значению

Пример демонстрации 

const {useRef, useEffect, useState} = React;
function usePreviousWithEffect(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

function usePrevious(value) {
  const ref = useRef();

  ref.current = value;

  return ref.current;
}
const App = () => {
   const [count, setCount] = useState(0);
   const previousWithEffect = usePreviousWithEffect(count);
   const previous = usePrevious(count);
   
   return (
      <div>
        <div>Count: {count}</div>
        <div>Prev Count with Effect: {previousWithEffect}</div>
        <div>Prev Count without Effect: {previous}</div>
        <button type="button" onClick={() => setCount(count => count + 1)}>Increment</button>
      </div>
   )
}

ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="app"/>

Также, чтобы ответить на ваш вопрос, вы передаете useEffect без зависимости, когда хотите выполнить какую-либо операцию для каждого рендера. Однако вы не можете установить состояние или выполнить действие, которое вызовет повторную визуализацию, иначе ваше приложение будет зациклено

...