react-lifecycle-component
A higher order component that accepts lifecycle hook functions as props
Allows you to wrap pure functional components so that you can take advantage of lifecycle hooks without having to create a new HOC each time to wrap your component.
npm install react-lifecycle-component --save
Problem
There are many times when you've written a pure functional component but you also need to trigger some data loading on componentDidMount or similar.
There's 2 main options when this happens. Either convert your PFC to a class or create a higher-order-component that does the lifecycle work and renders your component.
This small component takes the work out of option 2.
Solution
A Redux example:
Rather than creating a new HOC and doing this:
{ thisprops; } { return <WrappedComponent ...thisprops />; } const mapStateToProps = // ...; const mapDispatchToProps = getAllTehDatas; mapStateToProps mapDispatchToPropsWrapper;
Using this small utility component we can do:
const mapStateToProps = component: WrappedComponent; const mapDispatchToProps = componentDidMount: getAllTehDatas; mapStateToProps mapDispatchToPropsLifecycleComponent;
To make matters clearer, you may not want to pass your component via the component
prop and may instead want to wrap your component in a function call that wraps it in a LifecycleComponent
.
We provide applyLifecycle
for this purpose and it can be used as:
export default connect(mapStateToProps, mapDispatchToProps)(applyLifecycle(WrappedComponent))
Composed this looks like:
const composed = ; WrappedComponent;
Redux
To help make this easier we also provide a redux helper that does this composition for you. The interface is therefore the same as connect
.
mapStateToProps mapDispatchToPropsWrappedComponent;
We only pass the props to WrappedComponent
that are intended for that component. We don't pass any of the lifecycle hook props and we don't forward the component
prop on.