What was wrong with the class component? It was very understandable and predictable.
Hooks allow you to bundle code together by functionality, and consequently allow you to easily extract and share said functionality in a very composable way.
This is my go to for visualizing the difference: https://i.imgur.com/e9K8vfz.gif
You’re using React. The mechanism that enables code reusability is through composing components.
There’s nothing wrong with class components even for the most complex logic. The only downside is the community has moved on and mostly adopted hooks and functional components.
If you think that this:
return (
<Apple>
{({ apple }) => (
<Slicer slice={apple}>
{({ sliced: slicedApple } => (
<DinnerPlane contents={slicedApple} />
)
}
</Slicer>
)}
</Apple>
);
const apple = useApple();
const slicedApple = useSlicer(apple);
return <DinnerPlate contents={slicedApple} />;
Although you'd have to somehow ignore the fact that you'd end up with an even bigger mess if you want these intermediate functionality steps to interact with the parent component in a non-trivial way, ..
Needless to say, I have written such render-prop and "renderless" components in the past, and I see very little upside compared to hooks.
function FacebookComment({ commentId }) {
const comment = useGetComment(commentId);
const likes = useGetLikes(comment);
return (
<div>
<span>{comment.text}</span>
<span>{likes.length} likes</span>
</div>
);
}
<DinnerPlate>{...map <Slicer><Apple /><Slicer/> }</DinnerPlate>