Hooks Supremacy in React

Himanshu Singh
5 min readMar 30, 2024

Hello there, 👋
I am Himanshu Singh.
Recently, I was reading about React code design patterns, and I read about Compound, High Order Component, Container/Presentational, and Render Props patterns. But one thing, that was common for most patterns is that they can be replaced by new React Hooks now.

But, first, I should discuss all these patterns before we discuss how most of them can be replaced by hooks now.

Let’s start.

Compound Pattern

This pattern is quite useful when you have components that work together with a shared state and logic.

Suppose you are making a Menu component. We have a toggle button that the user can click, and we open a menu list when the toggle is on.

Let’s first create all the required components.
Let’s start with the menu list component.


function List({ children }: ChildrenProp) {
const { open } = useContext(MenuContext);
return open ? <ul>{children}</ul> : null;
}

function Item({ children }: ChildrenProp) {
return <li>{children}</li>;
}

Now, let’s create the toggle button.

function Toggle() {
const { open, toggle } = useContext(MenuContext);
return <button onClick={() =>…

--

--

Himanshu Singh
Himanshu Singh

Written by Himanshu Singh

I write blogs around React JS, JavaScript, Web Dev, and Programming. Follow to read blogs around them.

No responses yet