useEffect(() => {
})
<>
<Child log1 />
{console.log("log3")}
<Child log2 />
</>// prevents a re-render React.memo(Component, isShallowEqual) + equal function // le spread operator = tu peux passer des props unexpected, du coup isEqual peut etre couteux
// ne pas re-evaluer une valeur // Double memory / less CPU React.useMemo
useDeepMemo quand tu veux de la stabilité? pas sur
Pas utilser useMemo si ton truc est pas react memo? pas sur
useStableCallback tout le temps? mauvaise idee useCallback --> useStableCallback? pas toujours
getLabelForSeries = data => string getColorForSeries = data => string
// Child.tsx
React.useMemo(createReactElements, [getColorForSeries])
// tu peux pas utilsier useShallowMemo parce que tu as des objects nestés
// useDeepMemo timeseries data isEqual(timeseriesData) // 100 buckets * 200 series = 20k props to check!
<>
<Child1 timeSeriesData unstable />
<Child2 timeSeriesData unstable />
// si tu pars du principe que les composants attendent des references instable, tu dois faire 2 useDeepMemo!
// tu paye 2 fois to deep equal
// Solution de Univiz
// Univiz is in the middle of the tree // it turns unstable references into stable ones // Sub components don't have to use useDeepMemo or ony performance hook unless they have state.
// Les gros objects to memo par default parce que tu pourras pas faire de useDeepMemo // les ptits trucs pas forcement // component shield meme qui stabilise les references
// a chaque fois que tu transformes un gros object -> useMemo map data => { ...data, oups: true }
//