Как удалить средство визуализации функционально запомненного компонента, который содержит дочерний компонент в React?

Question

При написании обработчика для нескольких различных входных данных я столкнулся с проблемой повторного рендеринга компонентов, в которых есть дочерние компоненты. Как удалить средство визуализации?

Только компоненты без дочерние элементы и компоненты, использующие useMemo , не отображаются.

Это только часть кода,Здесь полный код .

// handle changes from input
export const useInputHandler = ({ initValues }) => {
  const [values, setValues] = useState(initValues || {});

  const handlerChange = useCallback(
    event => {
      const target = event.target;
      const name = target.name;
      const value = target.value;

      setValues({
        ...values,
        [name]: value
      });
    },
    [values]
  );

  return [values, handlerChange];
};

const App = () => {
  const [clicksNum, setClicks] = useState(0);

  const countClicks = useCallback(() => {
    setClicks(c => c + 1);
  }, []);

  const [values, handleChange] = useInputHandler({
    initValues: { simple: "", counter: "", empty: "" }
  });

  useEffect(() => {
    console.log("VALUES: ", values);
  }, [values, clicksNum]);

  return (
    <div style={{ display: "flex", flexDirection: "column", width: "30%" }}>
      <Button onClick={countClicks} />

      <Input onChange={handleChange} name="simple" value={values.simple}>
        {<div>hello</div>}
      </Input>

      <Input onChange={handleChange} name="counter" value={values.counter}>
        {clicksNum}
      </Input>

      <Input onChange={handleChange} name="empty" value={values.empty} />
    </div>
  );
};

Я ожидаю, что компоненты ввода не будут перерисовываться при каждом нажатии кнопки. В этом случае только второй вход (имя которого counter ) должен быть перерисован. Потому что оно оборачивает значение ( clicksNum ) состояния.

Answer 1

Ваш вход повторно визуализируется, потому что изменяются дочерние элементы.

{<div>Hello</div>} - это отдельный экземпляр при каждом рендеринге.

Если вы замените его на что-то вроде этого:

const hello = useMemo(() => <div>Hello</div>, []);

Он создаст новый экземпляр только в случае изменения какой-либо из зависимостей. Нет никаких зависимостей, и ваши повторные рендеры исчезнут.

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

const memoizedInput = React.useMemo(
  () => (
    <Input onChange={handleChange} name="simple" value={values.simple}>
      <Button onClick={countClicks} />
    </Input>
  ),
  [handleChange, countClicks, values.simple]
);