Hooks Supremacy in React

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={() =>…