Nathan Smith
  • Projects
  • About
  • Contact

Why functional components are the future of React (but hooks are dangerous)

June 25, 2019, 1:21 AMReact

I was skeptical. Why would I ever write a functional component instead of a class component? The promised benefits of functional components are either subjective, no longer true, or never were true. It's now just as easy to shoot yourself in the foot with functional components thanks to hooks like useState. The promised performance benefits of functional components still haven't been realized. And yet, I'm now a believer.

I have most of a Medium article written titled Hooks are bad for React. Most of the article is dedicated to showing why functional components with hooks are almost the same as class components, so why use functional components? And to a degree, I still believe that, but I never published that article because I saw the ugly truth about React and class components the first time I worked on a React project with other people.

Not working in isolation makes all the difference.

The two developers I'm working with started out with little React experience; immediately, they started putting state where it shouldn't have been, deriving state from props without cause, and adding multiple seconds to the build time with node-sass. Horrifying! One of the developers has soaked up advice and pointers like a sponge. For example, once I explained why it was better to derive a value on every render rather than derive state from props, they quickly refactored the offending code. The other developer, however, seems convinced that large, bloated, stateful components are the way, rather than composing a component from multiple subcomponents. Once, the other two developers were on vacation so I quickly refactored the 2nd developer's code to improve reuse, maintainability, and testability. The main way I did this was by converting as many components as I could to functional components.

This had a few side-effects. At the time, we hadn't used any hooks in the project, and I honestly don't think this particular developer was aware of their existence. So I made the components functional to handicap their ability to write bad code. The best way to manage a project? No. But I'm not technically in charge of these developers, so it's difficult to make executive decisions. The best I can do is offer comments in code reviews.

But hooks have defeated me. This problematic developer learned about the new hotness and I knew I was in trouble when React.useEffect showed up in a code review. This particular effect was being used to clear the browser history to fix an architecture issue, rather than refactor to avoid the need for the history clear. More (inappropriate) hooks followed. And this is why I still believe that hooks, while maybe not bad for React, are dangerous if the fundamental concepts of React are not well learned.

Previous: Metal & Synthwave are the Same Thing

Next: Publishing a Dev and Production CRA App to GH Pages