React has had several approaches over its lifetime to solve this problem:
- Mixins (legacy)
- Higher-order components (HOCs)
- Compound components
- Render props
- Custom hooks
Each pattern has its pros and cons. And even with hooks, there are still ideal use cases for all of the patterns.
Hi, I’m Ben Ilegbodu 👋🏾. In this minishop, not only will we learn how to write these patterns for sharing stateful logic, but we will also learn the best situations to apply these patterns in your codebase. You will be able to replace your unnecessarily complex components filled with dozens of configuration props and code branches with powerful components with flexible APIs.
asprops for minimal UI flexibility
- Add render props to invert UI rendering control
- Create compound components to provide layout control
- Leverage custom hooks when no shared UI is needed
- …and many more techniques for creating reusable components
- Experience building React applications with
- Experience creating custom hooks
- Experience with advanced hooks like
useCallbackwill also be helpful
- Are still new to React (try the Zero to React with Hooks minishop instead)
- Have React experience, but don’t yet have experience using hooks (consider the Migrating to React Hooks minishop instead)
By participating in this minishop, you are agreeing to the Minishop Code of Conduct.
Minishops by Ben Ilegbodu are fully-remote workshops that last about 3 hours. They’re highly-focused, covering only the concepts you want to learn so that you can level up your skills and get on with the rest of your day. By keeping it short, you’re able to absorb and retain the information before fatigue sets in and other distractions get in your way.
To learn more about minishops, read the Introducing Minishops blog post.
If you have questions about the minishop, feel free to email us at firstname.lastname@example.org.