Render props: renderItem and a function as children
renderItem is still everywhere in modern code. The Toggle version works too, but const [on, toggle] = useToggle() does the same with no extra component and no nesting.
Compound components share state through context so related parts can be arranged freely, render props let a component hand data to a function you supply, and higher-order components wrap a component to add props; hooks replaced most render props and HOCs, but each pattern still has a place.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Build a compound Accordion with Accordion.Item, Accordion.Header and Accordion.Panel, where only one item is open at a time.
Write a withLogger(Component) HOC that logs rendering <Name> every time the wrapped component renders, and set its displayName.
Rewrite this render-prop component as a hook: <WindowWidth>{(w) => <p>{w}px</p>}</WindowWidth>.
Explain it without notes
What are compound components, and how do the parts share state?
What is a render prop? Give an example where it's still the best choice today.
What is a higher-order component, and what problems made hooks preferable?
For each pattern, name a situation where you would still choose it over a custom hook.
Preview
Console
Nothing logged yet.Expected console output
Asha (admin) | Ravi (editor)
No invited users
Notifications on