button?
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 и как этого избежать?
а можно как то через useMemo сделать? Просто мне сказали что как то тут через useMemo можно сделать.
Ну так добавь useMemo
все что в провайдере будет ререндериться anyway, когда используется useContext, отказаться от useContext и кастом хук через рефы скорее всего решит проблему
Достаточно в данном случае кинуть обхект из value в useMemo с зависимостью date и рендера в Logger не будет при клике на вторую кнопку.
Ты говоришь про случай, когда value меняется. А у него оно каждый раз новое, потому что каждый рендер это новый объект. Поэтому этого можно избежать в данном случае, путём мемоизации value.
Обсуждают сегодня