>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.
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>;
}
}
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
I also wrote about this here:
https://medium.com/@dan_abramov/making-sense-of-react-hooks-...