4 ms·

>to me, separating out that function is a good thing To us, too, and that's exactly the point of Hooks. They let you extract logic into functions in a way that

>to me, separating out that function is a good thing To us, too, and that's exactly the point of Hooks. They let you extract logic into functions in a way that wasn't possible before. I suggest to read more than a single page -- in particular, extracting custom Hooks is largely the point of the proposal. https://reactjs.org/docs/hooks-custom.html https://reactjs.org/docs/hooks-custom.html I also wrote about this here: https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 https://medium.com/@dan_abramov/making-sense-of-react-hooks-...

prossercj 8y ago
That post has changed my opinion about hooks. I find this gist especially compelling: https://gist.github.com/gaearon/cb5add26336003ed8c0004c4ba820eae https://gist.github.com/gaearon/cb5add26336003ed8c0004c4ba82... Without hooks, that example would require adding a method (or two) to the component class. With custom hooks, that code can go into a separate module. Component bloat has been a problem for us, and if hooks can enable components to focus solely on render logic, I'd say that's an improvement.
- brlewis 8y ago
  Can't you achieve the same result by leaving only view logic in the component, and having the data-related logic, including the fact that data has changed in a way that may require redraw, handled in a separate object? Here's how I'd do it in Mithril/TSX: class WidthStore { width: stream.Stream<number>; constructor() { this.width = stream(window.innerWidth); window.addEventListener('resize', () => { this.width(window.innerWidth); m.redraw(); }); } } const widthStore: WidthStore = new WidthStore(); class MyResponsiveComponent { view(vnode) { return <p>Window width is {widthStore.width()}</p>; } }
cloverich 8y ago
It reminds me quite a bit of mixins.

prossercj 8y ago

That post has changed my opinion about hooks. I find this gist especially compelling: https://gist.github.com/gaearon/cb5add26336003ed8c0004c4ba820eae https://gist.github.com/gaearon/cb5add26336003ed8c0004c4ba82... Without hooks, that example would require adding a method (or two) to the component class. With custom hooks, that code can go into a separate module. Component bloat has been a problem for us, and if hooks can enable components to focus solely on render logic, I'd say that's an improvement.

brlewis 8y ago
Can't you achieve the same result by leaving only view logic in the component, and having the data-related logic, including the fact that data has changed in a way that may require redraw, handled in a separate object? Here's how I'd do it in Mithril/TSX: class WidthStore { width: stream.Stream<number>; constructor() { this.width = stream(window.innerWidth); window.addEventListener('resize', () => { this.width(window.innerWidth); m.redraw(); }); } } const widthStore: WidthStore = new WidthStore(); class MyResponsiveComponent { view(vnode) { return <p>Window width is {widthStore.width()}</p>; } }

cloverich 8y ago

It reminds me quite a bit of mixins.