Compose React hooks like composing React components

April 18, 2019 0 Comments

Compose React hooks like composing React components

 

 

This short article shows code examples how hooks are analogous to components in terms of composition. Without a word, let’s jump in the code.

Let’s use a minimalistic example. Here’s a component.

const Person = ({ person }) => (
<div>
<div className="personFirstName">
<span>First Name:<span>
<span>{person.firstName}</span>
</div>
<div className="personLastName">
<span>Last Name:<span>
<span>{person.lastName}</span>
</div>
</div>
);

Well, this component is a little bit big, so let’s split it into functions and compose them.

const FirstName = ({ name }) => (
<div className="personFirstName">
<span>First Name:<span>
<span>{name}</span>
</div>
);
const LastName = ({ name }) => (
<div className="personLastName">
<span>Last Name:<span>
<span>{name}</span>
</div>
);
const Person = ({ person }) => (
<div>
<FirstName name={person.firstName} />
<LastName name={person.lastName} />
</div>
);

Now, it looks organized. Why do we do this? Because, we can then use FirstName component in other components. It’s reusability.

What about hooks? Let’s suppose we have usePerson hook, which returns the person object. It’s not important how it’s implemented, but for example, we can assume it’s with useContext as a simple concrete case.

const Person = () => {
const person = usePerson();
const firstName = person.firstName;
const lastName = person.lastName;
return <div>{firstName}{' '}{lastName}</div>
};

This is over-simplified, but let us split it into functions and compose them.

const useFirstName = () => {
const person = usePerson();
return person.firstName;
};
const useLastName = () => {
const person = usePerson();
return person.lastName;
};
const Person = () => {
const firstName = useFirstName();
const lastName = useLastName();
return <div>{firstName}{' '}{lastName}</div>;
};

I hope you get the idea. Now, you can reuse useFirstName hook in other components.

Composition matters. A component can be built with other components, so can a hook be built with other hooks.

We have children in components. What would be an equivalent in hooks? I’m not 100% certain about this, but it might be hooks factory. Or, it’s just one variant of it. Here’s the code for the example above.

const createPersonHooks = (usePerson) => {
const useFirstName = () => {
const person = usePerson();
return person.firstName;
};
const useLastName = () => {
const person = usePerson();
return person.lastName;
};
return { useFirstName, useLastName };
};

Again, I’m not so sure about it, but just an idea. Constate seems to take a similar approach.

Comments would be appreciated by Twitter.


Tag cloud