React hooks design patterns and creating components without class

With the release of React 16.8 in 2019, React hooks have quickly become some of the most powerful tools in your React developer toolkit.

Hooks allow React developers to make functional components stateful. Instead of using a class component to hold stateful logic, we can use functional components.

Hooks changed React so much that some React developers are struggling to understand how they affect their other program decisions.

Today, we’ll explore how React Hooks have changed which design patterns you should use in React.

Here’s what we’ll cover today:

• What are hooks?
• How hooks changed React design
• Introduction to built-in hooks
• What old techniques are still usable?
• Next steps

Stand out with advanced React skills

Learn how to leverage hooks, Firebase, and the latest design patterns in half the time.

React for Front-End Developers

What are hooks in React?#

In React, hooks are functions that allow you to hook into React state and lifecycle features from function components. This allows you to use React without classes.

When you take an initial look at the React Hooks documentation, you’ll see that there are several Hooks that we can use for our applications. You can even create your own.

In the official documentation, hooks are explained as:

Functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.

Ultimately, hooks were designed with code reuse in mind. Hooks are also here to replace class components and the frustrations that come with them.

Advantages of design patterns and hooks#

React design patterns are essentially a template that lets us quickly create the structure of our application.

They’re great for a few reasons:

• You’re able to think more abstractly about how you create applications in React.
• They help you organize and simplify large React applications so you can build separate components and share logic between them.
• React patterns are tried and tested methods for building reusable components that don’t cripple flexibility.

Some of the most popular design patterns are compound components, higher-order components (HoC), and render props. Now that hooks have been brought into the picture, certain React patterns have gone out of favor including HoCs and render props.

They have not been removed from the framework (and it doesn’t seem like React will remove them) but developers are starting to favor hooks and here’s why:

• Hooks don’t introduce unnecessary nesting into your component tree.
• Hooks don’t suffer from drawbacks of mixins.
• Hooks reduce the amount of duplicated logic between components

While some patterns are going out of favor, they can still be implemented with hooks.

How hooks changed React design#

There are two main types of components in React and they are functional components (stateless) and class components (stateful). Both have their advantages and drawbacks.

Functional components are typically easier to test, write, and read but they lack some features like the ability to hold state.

Class components include features like lifecycle hooks and the ability to hold local state, but they are confusing for both machines and humans.

Class components, although useful, bring about some unexpected challenges that functional components don’t introduce. To name a few, class components make it difficult to separate concerns, you end up with confusing classes, and an overuse of wrappers.

But what if I want to use functional components and still keep the features that class components offer?

This is where hooks come in. Hooks allow you to use functional components (the preferred method for creating components) with all the bells and whistles that class components offer. With hooks, you’re able to share logic inside a component as opposed to between components, making separation of concerns less of a worry.

Now you’re able to write clean, reusable code that lets you create stateful components without the use of class.

Introduction to built-in hooks#

React comes with built-in hooks like useState and useEffect just to name a few.

useState is called inside a function component to add local state to it, which will be preserved between re-renders. useState returns a pair: the current state value and a function that lets you update it.

You can call this function from an event handler or somewhere else. It’s similar to this.setState in a class, except it doesn’t merge the old and new state together.

Side effects are common in React; things like data fetching, subscriptions, or manually changing the DOM are things we are used to doing.

The useEffect hook makes it easy to perform side effects right from a function component.

Remember componentDidMount and componentDidUpdate from a class? useEffect accomplishes the same goal as these but it’s unified into a single API.

Custom hooks#

React also gives you the freedom to leverage built-in hooks to create your own custom hooks.

You can write custom hooks that cover a wide range of use cases like form handling, animation, declarative subscriptions, and more, making functional components even more powerful.

For example, you could combine useState and useEffect to create useSemiPersistentState, which manages our state while syncing with local storage.

All custom hooks names should start with use to avoid confusion.

const useSemiPersistentState = (key, initialState) => {

 const [value, setValue] = React.useState(

   localStorage.getItem(key) || initialState

 );

 ...
};

const App = () => {
 ...

 const [searchTerm, setSearchTerm] = useSemiPersistentState(

   'search',
   'React'

 );

 ...
};

Explination

• The return values within App are in array form to match React best practices.
• The hook only uses locally stored values, the abstracted value variable, to make it more modular.
• We pass in a key to make sure we can use the custom hook more than once. Since the key comes from outside, React knows it can be changed and adds it to the dependency array of useEffect.

What old techniques are still usable?#

HoCs and render props patterns?#

You can continue to use HoCs and render props, but hooks are preferred.

Most use cases involving these patterns deal with rendering only a single child, so it’s not ideal to use these patterns because they can become complex and introduce nesting in your tree.

More often than not, hooks will be the means to accomplish what these patterns do.

Which design patterns are still relevant?#

While some design patterns are on their way out, others are still very much accepted by the community and can be reproduced using hooks. These patterns include:

• Compound components
• Control props
• Props collection
• Prop getters
• State initializer
• State reducer

Next steps#

Hooks are a relatively new feature that are designed to solve most of the problems that class components suffer from. They do however have an impact on the patterns you use to create apps, meaning there’s a bit of a learning curve.

The best way to beat the learning curve is to explore React hook projects of your own.

To help you transition to advanced React, Educative has created the React for Front-End Developers Path. This collection of courses helps you brush up on your React, learn how to pair it with popular technologies like Firebase, and explores all the top design patterns.

By the end of the Path, you’ll have completed multiple advanced React projects to add to your resume.

Happy learning!

Continue reading about React#

• Introducing React Design Patterns: Flux, Redux, and Context API
• React Hooks Tutorial: build a to-do list with React Hooks
• Advanced React Hooks: Deep Dive into useEffect Hook