20 ms·

I've been working with hooks for quite a while now; its main benefit is composability - before hooks up you rely on Higher order components (HOCs, HOFs but in c

I've been working with hooks for quite a while now; its main benefit is composability - before hooks up you rely on Higher order components (HOCs, HOFs but in component rendering) to provide composability of component behaviour - this is messy, very messy, and not performant. By using hooks the logic tidies up massively (so working on it becomes a lot quicker) and several hard to diagnose performance bottlenecks disappear. The 'not classes' stuff is a side benefit.

omeid2 8y ago
Can you please give some example of behaviour that you share across components that couldn't be factored out into a function?
- basil-rash 8y ago
  https://overreacted.io/making-setinterval-declarative-with-react-hooks/ https://overreacted.io/making-setinterval-declarative-with-r... is the article that solidified hooks as a useful concept for me.
- baddox 8y ago
  They can always be factored out into a function, after all, both HOCs and hooks are functions. One big (or at least obvious) benefit of hooks over HOCs is the fact that they can be composed without the possibility of prop name conflicts.
- Normal_gaussian 8y ago
  Well they can, except that function needs state as a parameter or calls from lifecycle, which means changing many places inside the component to have that state as well as call that component. A HOC previously served as a minimally invasive way to compose these behaviours (compose the HOC + use its param in render). If you are writing a moderately complex animation, you can quickly end up needing state, willMount, and willUnmount, plus the render change plus the logic, thats five places in a class. If this animation applies to many components you abstract to a HOC and simplify dev overhead at a performance cost. Using a hook lets you abstract that all into one function as you suggest. Most of the HOCs I wrote had to do with just local state + store state + logic, so not as extreme (editable, updatable, draggable, deletable etc.); but when you have many, the penalty adds up.
- danabramov 8y ago
  I tried to explain it here. https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 https://medium.com/@dan_abramov/making-sense-of-react-hooks-... Hope it helps!

omeid2 8y ago

Can you please give some example of behaviour that you share across components that couldn't be factored out into a function?

basil-rash 8y ago
https://overreacted.io/making-setinterval-declarative-with-react-hooks/ https://overreacted.io/making-setinterval-declarative-with-r... is the article that solidified hooks as a useful concept for me.
baddox 8y ago
They can always be factored out into a function, after all, both HOCs and hooks are functions. One big (or at least obvious) benefit of hooks over HOCs is the fact that they can be composed without the possibility of prop name conflicts.
Normal_gaussian 8y ago
Well they can, except that function needs state as a parameter or calls from lifecycle, which means changing many places inside the component to have that state as well as call that component. A HOC previously served as a minimally invasive way to compose these behaviours (compose the HOC + use its param in render). If you are writing a moderately complex animation, you can quickly end up needing state, willMount, and willUnmount, plus the render change plus the logic, thats five places in a class. If this animation applies to many components you abstract to a HOC and simplify dev overhead at a performance cost. Using a hook lets you abstract that all into one function as you suggest. Most of the HOCs I wrote had to do with just local state + store state + logic, so not as extreme (editable, updatable, draggable, deletable etc.); but when you have many, the penalty adds up.
danabramov 8y ago
I tried to explain it here. https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 https://medium.com/@dan_abramov/making-sense-of-react-hooks-... Hope it helps!