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>
);
}
Помогите пожалуйста понять почему так происходит. Заранее спасибо.