Member-only story

React Design Patterns: Return Component From Hooks

A Potential New Pattern Inspired by “Partial Application”: With practical examples using Material-UI and TypeScript

Thor Chen
Bits and Pieces

--

Image from Envato Elements (License Code: W2Q8UYJCM6)

Hooks have been introduced to the React community many years, and there are many new coding patterns emerged because of that. In this article, I would like to share my journey of exploring a potential pattern inspired by the concept of “partial application” — I call it “Return Component From Hooks”.

Let’s start with a simple example:

  • Add a button to trigger the popup menu
  • Manage the states to show/hide menu
  • Handle clicks of menu items

It looks fine when there is only one place where we need popup menu. However, we usually have many menus in many places. To achieve that, we may need to duplicate the boilerplate code across all these places — that’s not fun.

💡 Pro tip: It’s worth mentioning that you can use an open-source tool like Bit to publish, version…

--

--

Responses (9)

What are your thoughts?