Что если я добавлю множественную зависимость во второй параметр React's useEffect?

Question

Например, если я сделаю useEffect хук как useEffect(() => {...},[a,b]).Будет ли useEffect уволен, если один из [a, b] изменится или когда оба [a, b] изменятся?

Answer 1

Будет срабатывать при изменении одного из них.Можно подумать, что вы говорите React:

a и b - это то, что я использую внутри этого эффекта, поэтому, если любой из них изменится, мой эффект будетнеобходимо очистить старую версию и повторно выполнить с обновленными значениями.

Вот простой пример, который позволяет увидеть поведение:

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function App() {
  const [dependency1, setDependency1] = useState(1);
  const [dependency2, setDependency2] = useState(1);
  useEffect(
    () => {
      console.log("only dependency1", dependency1, dependency2);
    },
    [dependency1]
  );
  useEffect(
    () => {
      console.log("dependency1 and dependency2", dependency1, dependency2);
    },
    [dependency1, dependency2]
  );
  return (
    <div className="App">
      <button
        onClick={() => {
          setDependency1(prev => prev + 1);
        }}
      >
        Change dependency1
      </button>
      <button
        onClick={() => {
          setDependency2(prev => prev + 1);
        }}
      >
        Change dependency2
      </button>
      <button
        onClick={() => {
          setDependency1(prev => prev + 1);
          setDependency2(prev => prev + 1);
        }}
      >
        Change both
      </button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);