import React from "react"; import getRandomCountry from "./getRandomCountry"; import "./styles.css"; const Examples = [ [ "Inline", , ` Passing a provider children inline will always create new children references. JSX creates new objects everytime the the provider updates its value. This can lead to excessive rendering of the entire React subtree. Note the children here render everytime the provider updates.`, ` ` ], [ "Reference", , ` Wrapping a provider and passing in children by reference. This preserves referential equality of children across provider value updates. Note all the children here render only once.`, ` function ProviderWrapper({ children }) { return ( {children} ); } ` ], [ "Memoized", , ` Similar to Inline but uses memoization to preserve referntial equality of children. Note all the children here render only once.`, ` const memoizedChildren = React.useMemo(() => , []); {memoizedChildren} ` ] ]; export default function App() { const [exampleId, setExampleId] = React.useState(0); const [, example, explanation, code] = Examples[exampleId]; return (

{example}

{Examples.map((example, i) => { const [name] = example; return ( ); })}

{code}

{explanation}

); } function CountryProviderReference({ children: referenceChildren }) { const value = useTimer(0); // Providers check for children referential equality and bail render if equal return ( {referenceChildren} ); } function CountryProviderInline() { const value = useTimer(0); // Provider will continuously render due to inline children // always being a new object, no referential equality return ( ); } function CountryProviderMemoized() { const value = useTimer(0); // memoizedChildren created once on first render and memoized const memoizedChildren = React.useMemo(() => , []); // Provider will continuously render due to inline children // always being a new object, no referential equality return ( {memoizedChildren} ); } function ExampleProviderChildren() { return ( ); } const CountryContext = React.createContext(0); function Country() { const value = React.useContext(CountryContext); const { renderCounter } = useRenderAnimation( "Country", "ContextPulse", () => (

{value.flag} {value.name}

) ); return

{renderCounter}

; } function RenderCheck({ name, provider = false, children }) { const animationName = provider ? "ContextPulse" : "RenderPulse"; const { renderCounter } = useRenderAnimation(name, animationName); return (

{renderCounter}

{children}

); } function useTimer(startValue) { const [value, setValue] = React.useState(startValue); React.useEffect(() => { let timeoutId; function updateValue() { setValue(getRandomCountry()); timeoutId = setTimeout(() => updateValue(), 1000); } updateValue(); return () => clearTimeout(timeoutId); }, []); return value; } function useRenderAnimation( name, animationName, renderOutput = DefaultRenderAnimationOutput ) { const renders = React.useRef(1); const ref = React.createRef(); React.useEffect(() => { renders.current = renders.current + 1; ref.current.style.animation = `${animationName} 750ms ease-out`; ref.current.onanimationend = () => { if (ref.current) { ref.current.style.animation = null; } }; }); const renderCounter = (

{renderOutput(name, renders.current)}

); return { ref, renderCounter }; } const DefaultRenderAnimationOutput = (name, count) => { return ( <> {name} {count} ); };

context provider children updates