```jsx import { createContext, memo, useCallback, useContext, useMemo, useState } from "react"; const counterContext = createContext(); const ContextProvider = ({ children }) => { const [count, setCount] = useState(0); const inc = useCallback(() => { setCount((preCount) => preCount + 1); }, []); const returnValue = useMemo(() => { return { count, inc }; }, [count, inc]); return ( {children} ); }; // context connection hook const useCounter = () => { const { count, inc } = useContext(counterContext); return { count, inc }; }; const _Counter = () => { const { count } = useCounter(); return

Counter {count}

; }; const Counter = memo(_Counter); const Inc = () => { const { inc } = useCounter(); console.log("Inc"); return ; }; export default function App() { return (

); } ``` I just created a simple counter demo to understand the react rendering process and memoization. As a developer who cares about performance, I want to minimize the render counts of my components, but`` components always render when `count` (in context) changes. Normally, `` does not care about the counter value. The purpose is just to run a function that mutates the count. I think it's because the `returnValue` variables create a new object when `count` changes, which triggers the rendering process. How to prevent extra renders in that case? Any ideas? Codesandbox: https://codesandbox.io/s/stoic-wing-s76hyb?file=/src/App.js:0-1091

React Context Value memoization

Similar Threads