Если props меняются, каким образом я могу дать начальное значение, чтобы избежать эффекта анти-паттерна?

Question

[miliko mikoyan]

Я использую реагирующие крючки. Если реквизиты изменены, какие способы получить начальное значение? Я хочу избежать эффекта анти-паттерна.

ситуация 1

перед построением DOM.

насколько я понимаю, для этих целей подойдет использование useMemo.if есть другие варианты, которые вы можете их показать.

ситуация 2

после DOM

И в этом варианте useLayoutEffect, useEffect.if есть другие варианты, которые вы можете их показать.

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

import "./styles.css";
const X = () => {
  const [x, setX] = useState(0);
  return (
    <div>
      <div>
        <Y x={x} />
      </div>
      <div onClick={() => setX(x + 1)}>{"go"}</div>
    </div>
  );
};

function Y({ x }) {
  const [y, setY] = useState(x);

 /* useMemo(() => {
    console.log("");
    setY(x);*/
  }, [x]);
  /*useEffect(() => {
    console.log("");
    setY(x);
  }, [x]);*/
  /*useLayoutEffect(() => {
    console.log("");
    setY(x);
  }, [x]);*/
  console.log(y);
  return <div className="App">{console.log(y, "DOM")}</div>;
}

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

Я не думаю, что это хорошая практика, чтобы использовать все эти крючки. но я не вижу другого решения. Может быть, есть третий вариант без использования хуков?

Answer 1

[Антон Спирин]

Думаю тут правильней использовать useEffect:

function Y({ x }) {
  const [y, setY] = useState(x);
  useEffect(() => {
    if (x !== y) {
      setY(x);
    }
  }, [x, y]);

  return ( ... );
}

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

Comments

[miliko mikoyan]

а если у меня первая ситуация?

[Антон Спирин]

miliko mikoyan, а какая разница? Ну будет одна у вас одна лишняя перерисовка. Начальное состояние задается, то сразу.

Как вариант, еще можно использовать классовый компонент и getDerivedStateFromProps, но тогда придется хранить в состоянии prevProps.

[miliko mikoyan]

Антон Спирин предположим, что X-массив,если посмотреть - вот это часть кода.

function Y({ x }) {
  const [y, setY] = useState(x);
  useEffect(() => setY(x), [x]);
  console.log(y);
  return <div>{!y.length ? <div>{"Error"}</div> : <div>{y}</div>}</div>;
}

поймем.что первым пользователь увидит error.вот и разница.

[Антон Спирин]

miliko mikoyan, у нет же. Только если в массиве не будет элементов.

Демо.

[miliko mikoyan]

Антон Спирин, Я уже сделал анти-паттерны действия когда написал X внутри useState(x);а надо было вот так.

function Y({ x }) {
  const [y, setY] = useState([]);
  useEffect(() => setY(x), [x]);
  console.log(y);
  return <div>{!y.length ? <div>{"Error"}</div> : <div>{y}</div>}</div>;
}

[Антон Спирин]

miliko mikoyan, с чего вы взяли, что это анти-паттерн? Если вы точно знаете, что массив есть, то делать так можно. В любом случае правильно обработанное отсутствие значения это не ошибка, а вот изменение состояния во время отрисовки вполне себе подспорье для стрельбы в ногу.
Главное, как я уже писал, в случае с useMemo закешированное значение в любой момент может быть потеряно и вы вернетесь к значению полученному из props.

[miliko mikoyan]

Антон Спирин, с чего вы взяли, что это анти-паттерн? .и как я должен дать начальные значения, если это значение исходит от props.

[Антон Спирин]

miliko mikoyan, там написали, что антипатерном является простое копирование props в state, если подразумевается только использование без изменения. Если props задает начальное состояние, которое будет в последствии изменено, то это совершенно другой случай.

[miliko mikoyan]

Антон Спирин, вот такой случай у меня.

[Антон Спирин]

miliko mikoyan, тогда вам ничто не мешает писать props в начальное состояние.

[miliko mikoyan]

Антон Спирин, а затем изменить с помощью какого hooks ?втором случае понятно это useEffect, а 1.

[Антон Спирин]

miliko mikoyan, если вы не хотите реагировать на последующие изменения props, то это вообще не надо использовать.

Если надо реагировать на последующие изменения props и хотите перерисовать компонент всего один раз по изменению, то тут лучше использовать getDerivedStateFromProps. Тогда состояние будет обновлено по приходу новых props. Но как уже писал выше надо хранить предыдущее значение, так как метод статический:

const computeDerivedStateFromProps = ({ x }) => ({
  y: x,
  prevX: x,
});

class Y extends React.Component {
  static getDerivedStateFromProps(props, state) {
    if (props.x !== state.prevX) {
      return computeDerivedStateFromProps(props);
    }

    return null;
  }

  state = computeDerivedStateFromProps(this.props);

  render() { ... }
}

Выглядит, правда, такое решение не очень изящно. Но главное, что оно работает.

[miliko mikoyan]

Антон Спирин, ненавижу классный компоненты,ok

[Durin Qurkingo]

Антон Спирин а как делать всё это в hooks?