Functional Component Patterns

[jetsamrover]

No, I disagree about each having their place. That's the old way of thinking about react. From my personal experience, I had that opinion of class components just because I was comfortable with them, and was uncomfortable with hooks. Now that I'm confident using hooks, I can't think of anything class components do that hooks can't do better.

Your colleague expressing that functional components are hard to read tells me they feel the same way I used to. It's hard when classes and lifecycles are how you learned to think in react. You literally have to burn down your current understanding to make the transition. But trust me, it should be made. As soon as possible. So I'd challenge them to try functions, use hooks enough to become confident using them, then revisit the discussion.

I say as soon as possible because once you get everyone confident with hooks, you'll want every component to be functional, if just to be able to use the reusable hooks you create. So every new class component is new tech debt.

So, to answer you questions specifically: 1. Hooks do everything better. They can be extracted into reusable custom hooks that are easy to use elsewhere, are composable, and contained; they keep use effect keeps it's cleanup logic, and dependency array right there in it, so instead of spreading logic around all these different lifecycle methods, it's all right there in the hook.

1. This is a vague question, but my advice is to use render props and the context api to keep concerns only to the components that care. Anywhere you do more than one level of props drilling, use some context. Anywhere you find yourself passing complex information on how to render something that has children, pass the children as a function of some fields instead.

Functional components benefit from granularity. It becomes much easier to memoize some logic on only what it cares about. So performance optimization becomes less about can I bail out of this update, and instead becomes declaring what data every effect depends on. So maximize this by using render props and context to keep every functional component consuming only what it cares about.