Lifecycle with React’s FunctionComponent

Lifecycle with #ReactJS Function Component

  • I’m thinking about doing something about it and this article is about how to do it.
  • For such reasons, it is often easier for people to use “Stateless FunctionalComponent”, but as a disadvantage in creating applications, “Stateless FunctionalComponent” alone can’t handle “lifecycle”.
  • “hocFactotry” is the name of the function that is the factory of HOC (HigherOrderComponent), W is the React component passed to the argument, and E is the React component of the return value.
  • As the number of components taking this form increases, the class declaration and render become boilerplates.
  • Functions related to life cycle are only a few.

Hello. I’m Sosuke Suzuki of Boostnote maintainer.
Boostnote is written in React.
Boostnote has been passed time since the development, and there are components that are bloated in many places.
Thanks to contributors as well, those components are getting better than before, but they are being Unobtrusive.
I’m thinking about doing something about it and this article is about how to do it.

Hello. I’m Sosuke Suzuki of Boostnote maintainer. Boostnote is written in React. Boostnote has been passed time since the development, and there are components that are bloated in many places. Thanks to contributors as well, those components are getting better than before, but they are being Unobtrusive. I’m thinking about doing something about it and this article is about how to do it.

Since bloated components are hard to read and difficult to manage, it is necessary to divide the components into appropriate sizes. Important things in dividing, eliminate all State that can be omitted and make components as StatelessFunctionalComponent as possible. It is obvious that we don’t hold the state by implementing it as “StatelessFunctionalComponent” instead of extends React.Component.

Even if it is inevitable for a component to possess a state to a certain extent, I want to reduce the number of parts that I have to pay attention to state management.

For such reasons, it is often easier for people to use “Stateless FunctionalComponent”, but as a disadvantage in creating applications, “Stateless FunctionalComponent” alone can’t handle “lifecycle”. In order to realize that, it is necessary to use “HigherOrderComponent”. HigherOrderComponent is implemented by a function that takes a React component as an argument and returns a React component as an argument. The type signature in like Haskell would be as follows. “hocFactotry” is the name of the function that is the factory of HOC (HigherOrderComponent), W is the React component passed to the…

Lifecycle with React’s FunctionComponent