2 ms·

I've read about Hooks for awhile, but they still confuse me. Maybe it's largely because I haven't experienced any of the pain points that are described as the m

I've read about Hooks for awhile, but they still confuse me. Maybe it's largely because I haven't experienced any of the pain points that are described as the motivation for their development, but I've used a number of state-management libraries that handle state. Just as one example, in a lot of posts and commentary I've seen, is that hooks are replacements for both HoCs and render props. Admittedly, I haven't yet tried to do any actual development with hooks, but I can't even figure out how to solve the problem in the example in docs for HoCs[0]. Do you pass in a hook as a prop? That doesn't seem wise. A custom hook for each data source still has the same code duplication. The docs talk a lot about how to build individual components using hooks, but very little about tying them together. [0]: https://reactjs.org/docs/higher-order-components.html https://reactjs.org/docs/higher-order-components.html

acemarke 6y ago
Hooks solve a couple different problems: - Giving function components the ability to have internal state and trigger side effects, giving them the same capabilities as class components have had - Reusing logic across components I talked about the progress from mixins to HOCs to render props to hooks in a talk at ReactBoston last year [0], which had an example of tracking mouse coordinates using all four approaches. In that sense, yes, they do replace the other techniques as a way to reuse logic. You call them inside of your function components, like this: function MyComponent() { const [counter, setCounter] = useState(0); const {x, y} = useMousePosition(); // rest of the rendering logic here } [0] https://blog.isquaredsoftware.com/2019/09/presentation-hooks-hocs-tradeoffs/ https://blog.isquaredsoftware.com/2019/09/presentation-hooks...

acemarke 6y ago

Hooks solve a couple different problems: - Giving function components the ability to have internal state and trigger side effects, giving them the same capabilities as class components have had - Reusing logic across components I talked about the progress from mixins to HOCs to render props to hooks in a talk at ReactBoston last year [0], which had an example of tracking mouse coordinates using all four approaches. In that sense, yes, they do replace the other techniques as a way to reuse logic. You call them inside of your function components, like this: function MyComponent() { const [counter, setCounter] = useState(0); const {x, y} = useMousePosition(); // rest of the rendering logic here } [0] https://blog.isquaredsoftware.com/2019/09/presentation-hooks-hocs-tradeoffs/ https://blog.isquaredsoftware.com/2019/09/presentation-hooks...