Реагирует на контекст api только для компонентов, которые используют значения, которые изменились

Question

Я возился с контекстным API и передавал пару значений через дерево, назовем их val и val2.И у меня есть три разных компонента, давайте просто назовем их Первым, Вторым и Третьим.Второй и третий будут потребителями Context Api в React.Второй получит первый вал, а третий получит второй вал2.Теперь, если у меня есть функция, которая изменяет первый val, который использует второй компонент, я получаю рендер третьего компонента, который использует значение val2.С редуксом я не получаю этот нежелательный рендеринг.Мне было интересно, есть ли способ обойти этот рендеринг в реакции, или если до сих пор используется избыточность для получения такого типа производительности.Вот небольшая разметка того, о чем я говорю:

Состояние и глобальный контекст хранятся в обертке, обертывающей первый компонент, который оборачивает второй и третий компоненты.

Вот второй компонент:

import React, { useContext, useState } from 'react';
import {GlobalContext} from '../context/GlobalState'

const Second = () => {
  console.log("Second Rendered");
  const context = useContext(GlobalContext);
  const [inputVal, updateVal] = useState('');
  const handleSubmit = e => {
    e.preventDefault();
    context.updateVal(inputVal)
  }
  return (
    <>
      <p>{context.val}</p>
      <form onSubmit={handleSubmit}>
        <input onChange={(e) => updateVal(e.target.value)} name="val" value={inputVal} />
        <button type="submit">Update Val</button>
      </form>
    </>
  )
}

export default Second;

И вот третий компонент:

import React, { useContext} from 'react';
import {GlobalContext} from '../context/GlobalState';

const Third = () => {
  console.log("Third Rendered")
  const context = useContext(GlobalContext);

  return (
    <p>{context.val2}</p>
  )
}

export default Third;

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

Answer 1

Я понимаю, что вам нужно избегать повторного рендеринга в вашем <Third /> компоненте.В этом случае вы можете использовать React.memo с функциональными компонентами, это такая же функциональность, как у чистых компонентов, но без класса.

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});