Whether the component is rerendered when using React.memo and useContext?

Я встретился с проблемой во время изучения React. В документации говорится : "React.memo затрагивает только изменения пропсов. Если функциональный компонент обёрнут в React.memo и использует useState, useReducer или useContext, он будет повторно рендериться при изменении состояния или контекста."

Я решил проверить так ли это. Написал код состоящий из 3 компонентов и файла с контекстом: App.jsx:

function App() {
    const [data, setData] = useState({email: 'email'});
    const [some, setSome] = useState(0)
    const {Provider} = dataContext;

  return (
    <Provider value={data}>
      <Container>
        <button onClick={() => {setSome((a)=>a+1)}}>{some}</button>
        <Form/>
      </Container>
    </Provider>
  );
}

Form.jsx:

const Form = () => {
    return (
        <form>
            <Input/>
            <button type='submit'>Click</button>
        </form>
    )
}

Input.jsx

const Input = () => {

    const value = useContext(dataContext);
    console.log(value);

    return (
        <>
            <input type="email" value={value.email} />        
        </>
}

context.js:

const dataContext = createContext({email: 'email'});

export default dataContext;

В инпуте есть вывод в консоль для проверки на то, когда производится ререндер компонента console.log(dataContext). Я получал вывод в консоль каждый раз при изменении состояния счётчика не связанного с передаваемым контекстом в app.js, на сколько я понимаю причина в ререндере app.js и пересоздании объекта data в useState. Далее я обернул в React.memoкомпонент Input.js и получил вывод в консоль только 1 раз при монтировании, что очень странно, т.к. есть такое ощущение, что memo начал проверять приходящий контекст .Потом, я решил попробовать передавать в Provider не состояние, а сразу объект. Это опять привело к постоянным ререндерам при изменении состояния счётчика. В итоге код в App.js получился таким:

function App() {
    const [data, setData] = useState();
    const [some, setSome] = useState(0)
    const {Provider} = dataContext;

  return (
    <Provider value={{email: 'email'}}>
      <Container>
        <button onClick={() => {setSome((a)=>a+1)}}>{some}</button>
        <Form/>
      </Container>
    </Provider>
  );
}

Помогите пожалуйста понять почему так происходит. Заранее спасибо.


Ответы (0 шт):