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>