Https://Codesandbox.Io/S/1-D5q0gm Как поправить тут ререндер компонента Logger при нажатии на второй

Question

React — русскоговорящее сообщество

Stepan Tr

Https://Codesandbox.Io/S/1-D5q0gm Как поправить тут ререндер компонента Logger при нажатии на второй

button?

#frontend #javascript #programming #react.js #russian

0

19.04.2022

6 ответов

14 просмотров

Stepan Tr Автор вопроса

import * as React from "react"; import "./styles.css"; const ProfileContext = React.createContext({ name: "Den", hiredAt: new Date() }); const useProfileContext = () => { const context = React.useContext(ProfileContext); return context; }; const Logger = React.memo(() => { console.log("Logger"); const { name, hiredAt } = useProfileContext(); return ( <h1> {name} - {hiredAt.toString()} </h1> ); }); export default function App() { const [experience, setExperience] = React.useState(0); const [date, setDate] = React.useState(new Date()); return ( <div className="App"> <button onClick={() => setDate(new Date())}>Update date</button> <button onClick={() => setExperience(experience + 1)}> Increment experience </button> <ProfileContext.Provider value={{ name: "Dan", hiredAt: date }}> <Logger /> </ProfileContext.Provider> Experience: {experience} </div> ); } почему ререндериться Logger и как этого избежать?

0

19.04.2022

Stepan Tr Автор вопроса

а можно как то через useMemo сделать? Просто мне сказали что как то тут через useMemo можно сделать.

0

19.04.2022

Данил 🇷🇺

Stepan Tr
а можно как то через useMemo сделать? Просто мне с...

все что в провайдере будет ререндериться anyway, когда используется useContext, отказаться от useContext и кастом хук через рефы скорее всего решит проблему

0

19.04.2022

Илья

Данил 🇷🇺
все что в провайдере будет ререндериться anyway, к...

Достаточно в данном случае кинуть обхект из value в useMemo с зависимостью date и рендера в Logger не будет при клике на вторую кнопку.

0

19.04.2022

Илья

Данил 🇷🇺
все что в провайдере будет ререндериться anyway, к...

Ты говоришь про случай, когда value меняется. А у него оно каждый раз новое, потому что каждый рендер это новый объект. Поэтому этого можно избежать в данном случае, путём мемоизации value.

0

19.04.2022

Илья · Accepted Answer

Илья

Stepan Tr
а можно как то через useMemo сделать? Просто мне с...

Ну так добавь useMemo

0

19.04.2022

169 похожих чатов

Https://Codesandbox.Io/S/1-D5q0gm Как поправить тут ререндер компонента Logger при нажатии на второй

6 ответов

Похожие вопросы