Share Functionality Between React Components Using Recompose

Sharing Functionality

The concept of sharing functionality between React components is very common. By establishing functionality we can set behavior in one place and then extend it across multiple components. Generally, developers go for Higher-Order Components for such a task, but there is another way present to do so using the Recompose.

Recompose-

The official documentation states that ‘Recompose is a React utility belt for function components and higher order components.’

Well, normally, it is a library for React which includes plenty of helpers that return different higher order components. This is a great thing because it requires some hard work to define common React pattern and make them available immediately. To understand the exact working of this library, let’s check out an example.

Add State To Functional Stateless Components

Okay, so you probably guess by the name that the function which doesn’t have any state is referred to as stateless. It doesn’t really accepts props and return UI, it is something like this;

const Greeting = props =>

 <p>

   Hello, {props.name}!

 </p>

In the situation, where you want to use state in your functional stateless components, then you have to convert it to a class component. And, here the Recompose comes.

Recompose offers you the withState() helper to add a state to your functional stateless components. But, it will only manage the single state value. The structure withState() looks like;

withState(

 stateName: string, // the name we call our state

 stateUpdaterName: string, // the name of the function to call

 initialState: any | (props: Object) => any // optional default state to pass

): HigherOrderComponent

If you haven’t understand this example properly, then the alternative example that will briefly explain the concept is;

const App = withState(“count”, “handleCounter”, 0)(({ count, handleCounter }) => {

 return (

   <div>

     <p>{count}</p>

     <button onClick={() => handleCounter(n => n + 1)}>Increment</button>

     <button onClick={() => handleCounter(n => n – 1)}>Decrement</button>

   </div>

 );

});

So, as we already have the withState() helper with us, then we can call it immediately and provide it with the required parameters. The required parameters are;

  • stateName. It is the name by which your state will be called.
  • stateUpdaterName. It defines the name of the functional call.
  • initialState. It is optional default state the you have to pass.

These parameters are then integrated into UI markup to render on the front end.  Well, there is another counter way available for this example. As we know more the merrier, so it’s interesting to study the new way in which Recompose helper can be used.

So, first of all, create a higher order component using the withState () and the required parameters. It will give you structure as;

const enhanced = withState(“co

In the next step, make the counter component working in the withState () parameters;

const Counter = ({ counter, handleCounter }) => (

 <div>

   <h1>{counter}</h1>

   <button onClick={() => handleCounter(n => n + 1)}>Increment</button>

   <button onClick={() => handleCounter(n => n – 1)}>Decrement</button>

 </div>

);

P.S. The name of the state and the updater function is passed as props to the counter component by now. So, you can create the App component by wrapping the counter in the higher order components.

const enhanced = withState(“count”, “handleCounter”, 0);

const App = enhanced(({ count, handleCounter }) => {

 return (

   <div>

     <p>{count}</p>

     <button onClick={() => handleCounter(n => n + 1)}>Increment</button>

     <button onClick={() => handleCounter(n => n – 1)}>Decrement</button>

   </div>

 );

});

Conclusion

Recompose is a very nice tool to share functionality between the React components. Well, if you are thinking it only has withState () component, then you are wrong as it has plenty of other components like withHandlers(), withReducer, etc., However, in the beginning, we would recommend you to get use to the withState () Component and practice it hard. And, we will soon come with the other components of Recompose.

Send a Message