Hacker News new | ask | show | jobs
by thrwy_918 1203 days ago
One of the promises of using hooks was that you wouldn't have to care about things being recreated every render. Gone were the days of complex update logic in lifecycle methods like `componentWillUpdate()`, `componentWillReceiveProps()`, `componentDidReceiveProps()` etc. Now you use clean, functional components everywhere, even if they needed local state. No kludge, just clean code.

But most of the production functional React code I see is sprinkled so liberally with complex `useCallback()`, `useMemo()` and `useRef()` calls to prevent unnecessary updates that it seems just as bad as before. Worse, sometimes, because the hooks pattern can encourage more indirection. I still find myself thinking all the time about object references in state, cloning vs. mutating, dependency arrays with 5, 6, 7 distinct dependencies.

Honestly, I don't know if it's any better than it used to be. At least the `componentDidReceiveProps()` logic tended to all be in one place.

2 comments

Most of the usecallback or usememo you should try to remove. They are usually there to fix some other rendering issues (mostly performance).

But I also don’t understand, why react renders all child components if the parent renders. As long as their props stay the same, they should just stay as they are.

> But I also don’t understand, why react renders all child components if the parent renders. As long as their props stay the same, they should just stay as they are.

It "renders" all child components if their parent renders in order to check if their props have changed or not.

If the component has not actually changed, it does not actually re-draw it.

I agree with this take! And class-scoped callbacks kept the render function so clean, I feel like hooks really muddled up the API with regards to render. It also created far-more proprietary-to-React logic.