3 ms·
> You can definitely use useMemo with JSX elements to prevent child components from being re-rendered too often Only if those child components are memoized. By
by culi 3y ago
> You can definitely use useMemo with JSX elements to prevent child components from being re-rendered too often
Only if those child components are memoized. By default, whenever the state of a component changes, React will rerender the entire subtree. The only time it doesn't is when a child component is memoized (React.memo) AND the props haven't changed. Utilizing useMemo and useCallback is how we prevent non-primitive props from being recreated unnecessarily
- pavlov 3y agoI'm not sure what you're arguing here. useMemo() works for memoizing child elements. I linked to the React docs showing this.
- culi 3y agoI see what you mean. I'm a little shocked the docs have an example of it being used in this way. Using `useMemo` in this way is generally considered a bad practice and a "hack". The new version of the react docs does not have an example of useMemo being (mis)-used in this way
- acemarke 3y agoReact actually has a little-known "same element reference" optimization. If your component returns the exact same JSX element reference in the same spot in consecutive renders, React will bail out of rendering that subtree, regardless of whether or not the child component is wrapped in `React.memo()`. This allows the parent component to control the behavior. So yes, `useMemo` would be how you do that: - https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/#component-render-optimization-techniques https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-...