Advantages of functional components (and hooks) over class components in React

Functional components have a number of advantages over class components. Perhaps the biggest advantage is simplicity. Functional components are just functions that return JSX code. Syntax is much easier than it is with class components.

With functional components, you don’t need to use the confusing this property. You might think that you know how to use this, but class components add a whole different level of complexity. It’s difficult for others to understand your code as well. That makes it difficult to find and fix errors in the code. In general, getting rid of the ‘this’ property is a plus. Most of the time, mistakes with React class components happen because of improper use of this.

Next, functional components are simply easier to set up. They’re normal functions, so they follow a familiar pattern if you’ve ever worked with functions in JavaScript. Props are passed in as a normal argument. Props are easier to access in functional components than class components, where you have to access them in roundabout way.

Improvements to readability means easier collaboration as well. Web development is a team sport, and functional components are easier for your team members to understand. This also means functional components are easier to test and maintain.

They also require less lines of code. In class components, state is also more complex. In functional components, state is more abstract. The useState hook can initialize the state, return a simple variable that contains state variable, and the function that updates it. The setState() method can be quite confusing. Having a single state variable, and the function that updates that specific state value can be very beneficial.

The useEffect() hook also simplifies lifecycle methods. Some React developers might disagree, but useEffect() is much more effective for executing side effects. You can effectively replace componentDidMount(), componentDidUpdate(), componentWillUnmount() and other essential lifecycle hooks. useEffect() allows you to selectively watch for changes to certain state values, but not others.

You might as well get used to hooks now, because most supporting libraries and packages are redesigned to work with hooks. External libraries are essential for building web applications quickly. Without them, you’ll have to reinvent the wheel too much. It’s simply not practical to ignore functional components and specifically hooks.

For example, in this blog post the author uses useEffect() to create an event listener for ‘resize’ event, so you get current window width in React.

With introduction of hooks, functional components gained the capabilities of class components. At this moment, they have both the simplicity and features for dynamic functionality.

Most companies are refactoring their code from class components to functional components. You should get to used to writing components in the form of functions.

Functional components are the future of React. Developers of the library have hinted that functional components are going to have performance advantages in the future.

Leave a Reply

Your email address will not be published. Required fields are marked *