Стремитесь к минимально необходимому состоянию в компоненте React

Сохраняйте состояние компонента как можно более минимальным и избегайте ненужной синхронизации состояний.

🚫 Перед рефакторингом — b является избыточным состоянием, которое должно быть синхронизировано:

export default function App() {
  const [a, setA] = useState(1);
  const [b, setB] = useState(1);

  function updateA(x) {
    setA(x);
  };

  function updateB() {
    setB(1 + a);
  };

  useEffect(() => {
    updateB()
  },[a])


  return (
    <div>
      <button onClick={() => updateA(a+1)}>Click</button>
        <p>a: {a}</p>
        <p>b: {b}</p>
    </div>
)
};
Вход в полноэкранный режим Выход из полноэкранного режима

✅ После рефакторинга — a является минимально достаточным состоянием и просто выводим b из него:

export default function App() {
  const [a, setA] = useState(1);

  function updateA(x) {
    setA(x);
  };

  function updateB() {
    return a+1
  };

  return (
    <div>
      <button onClick={() => updateA(a+1)}>Click</button>
      <p>a: {a}</p>
      <p>b: {updateB()}</p>
    </div>
  )
};
Войти в полноэкранный режим Выход из полноэкранного режима

Оцените статью
devanswers.ru
Добавить комментарий