Pirmiausia išmatuokite, tada ištaisykite tikrąją priežastį — neišsklaidykite useMemo visur spėjimu.
Naudokite React DevTools Profiler (įjunkite "Highlight updates when components render"). Jis parodo, kurie komponentai buvo pervaizdinami ir kodėl (pasikeitė props, pasikeitė state, parent pervaizdintas, context pasikeitė).
1. Nauji object/array/function props kiekviename pervaizdinime sugriauna React.memo:
// ❌ new function + new object every render
<Child onClick={() => go()} style={{ color: "red" }} />
// ✅ stabilize them
const onClick = useCallback(() => go(), []);
const style = useMemo(() => ({ color: "red" }), []);
<Child onClick={onClick} style={style} />
2. Context reikšmė iš naujo sukurta kiekviename pervaizdinime → visi vartotojai pervaizdinami. Memoizuokite value arba padalinkite contexts.
3. State paskelbtas per aukštai. Žemesnės state vietos, kad mažiau komponentų juo priklausytų, dažnai duoda didžiausią proveržį:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Brangus darbas render metu → apvyniokite su useMemo.
Pervaizdinimas paprastai yra pigu — React yra greitas. Dauguma "optimizacijų" prideda sudėtingumo be jokios išmatuojamos naudos. Pageidaukite struktūrinių sprendimų (state suartinimo, sąrašo virtualizavimo tūkstančiams eilučių) virš memo sklaidos. Optimizuokite konkrečias karštas vietas, kurias profiler atsveria, ir iš naujo išmatuokite, kad patvirtintumėte, jog ištaisymas tikrai padėjo.
IT pokalbių klausimų biblioteka su išsamiais atsakymais — nuo Junior iki Senior.
Paaukoti