When and how to choose between React Hooks and old HOC props passing?

Question

Until now we were used to Flux flow where data entered into the component through props. So you could look at the Props signature and see what is the component requirements.

Hooks are an amazing feature, but as we transition to them I find that they provide another entrance for dependencies which is harder to manage since you have to look at the actual component code to see it.

Of course, we can use Hooks only in container components, but I feel that some of their main selling points are their ability to reduce nesting and HOC.

What are the best practices (currently) for deciding which component should use a hook and which should use render props?

Answer 1

Hooks and HOCs are different programmings models, and comparing them will seem to be as comparing oranges and apples.

TL;DR

As a rule of thumb, I use HOCs when I want a conditional rendering of components (if condition: render A, else render B), otherwise, I use hooks. That's only my opinion.

Pros & Cons:

HOCs Pros

• Easily separate all logic from the UI component (see recompose).
• Easy to compose.
• Manipulate component before any render.

HOCs Cons

• Name clashes - 2 HOCs can use and set a prop with the same name.
• React dom is gigantic.
• Every change in the parent props caused the children to rerender - which is the default behavior in React but when we have many HOCs we need to be very careful.
• Types - From the component point of view, it is difficult to understand which props and types we are getting.
• Using a HOC will pass all the props to the child, even if the child needs from that specific HOC only the prop x.
• The process of using an argument that depends on a component's props for the HOC can be complicated

HOCs Pro & Con both

• No need to define variables, just wrap with a HOC and you'll get the props the HOC supplying - which makes our UI component "guess" the names of the props.

Hooks Pros

• Readable & declarative.
• Performance - updates only when specific props are changed.
• Growing community.

Hooks Cons

• Only within the component - which means cannot render component by a condition of props that are passed.
• Giant component files which contain UI & logic altogether.