What patterns exist for sharing logic between components, and how do they compare?

React refs, context and custom hooks · Experienced

Model answer

Custom hooks (usually best), composition with children and slots, render props, and higher-order components. Hooks avoid wrapper nesting and are easy to test. Render props still help when a component must control what to render with shared data. HOCs fit cross-cutting wrappers in legacy code.

Pick the simplest that keeps data flow obvious.

Learn this topic

React Context API Explained: Share Data Without Passing Props in the course React.js Full Course: Beginner to Advanced.

Sign in to add your own answer.

More questions

• What is useRef used for?
• What is Context and when would you use it?
• What is a custom hook?
• What is forwardRef and how does it change in React 19?
• What is the difference between useRef and useState?
• How can Context cause performance problems, and how do you reduce them?