Lifecycle with React’s FunctionComponent

Originally posted on Boostlog.

As much as possible “Stateless FunctionalComponent”

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.

12345// Example of StatelessFunctionalComponent
const component = ({hoge, huga}) => (
  <h1>{hoge}</h1>
  <h2>{huga}</h2>
)

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.

Life cycle is HigherOrderComponent (HOC)

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 argument, and E is the React component of the return value.
HigherOrderComponent:: W: React.Component => E: React.Component
HOC enhances the abstraction of components and enables further reuse.
With HOC you can hook the lifecycle of StatelessFunctionalComponent.
You can use it for various other things, but this article does not give a detailed explanation about HOC.
The FaceBook official document, Franleplant ‘s React Higher Order Component in depth etc are very easy to understand about HOC.
HigherOrderComponent:: W: React.Component => E: React.Component

12345678910111213141516const InputComponent = ({hoge, boo}) => (
 <h1>{hoge}</h1>
 <h2>{boo}</h2>
)
function logProps(WrappedComponent) {
 return class extends React.Component {
 componentWillReceiveProps(nextProps) {
 console.log(‘Current props: ‘, this.props);
 console.log(‘Next props: ‘, nextProps);
 }
 render() {
 return <WrappedComponent {…this.props} />;
 }
 }
}
const EnhancedComponent = logProps(InputComponent);

Even if this method is adopted, the component returned by HOC needs to be described using extends React.Component.
As the number of components taking this form increases, the class declaration and render become boilerplates.

Easier HOC with recompose

There is a library called recompose.
This library is a utility function for HOC and is called react version lodash.
There are various functions in this library, they can see the document in recomponse’s Github
As mentioned above HOC has various uses, there are many functions for them.
Functions related to life cycle are only a few.
That’s why I think we can introduce it relatively easily.
This area is really like lodash.
You can use only the necessary functions as appropriate, and the library itself does not have a complicated structure.
The function required to easily implement the life cycle with HOC is the lifecycle function.
The lifecycle function has the following type signature.
lifecycle :: spec: Object => H: HigherOrderComponent
And it is used like this.

12345678910const PostsList = ({ posts }) => (
  <ul>{posts.map(p => <li>{p.title}</li>)}</ul>
)
const PostsListWithData = lifecycle({
  componentDidMount() {
    fetchPosts().then(posts => {
      this.setState({ posts });
    })
  }
})(PostsList);

State in the lifecycle argument is passed as props to the component passed to the HOC argument.
Also, the lifecycle type signature can be rewritten as.
lifecycle :: spec: Object => W: React.Component => E:Component
It is natural that the type of HOC is HOC :: W: React.Component => E: React.Component, but for those using Haskell, it may be easier to understand who wrote it as described above.
Summary
If you use HOC with “recompose”, you can easily handle lifecycle with “StatelessFunctionalComponent”.
I think that you should use it because it reduces the consideration of the state and makes the description concise.
I also wants to divide this component moderately in this way in Boostnote.

📣 The Boostnote team launches IssueHunt for sustainable open-source ecosystem.

https://issuehunt.io/