undefined | Better HN

0 pointsbaron8165y ago0 comments

> Manually managing your dependency graph and memoizing in all the right places

I wouldn't say it's harder, but it's certainly not simple. There are a handful of mistakes that I see repeated, but if you get over those hurdles, you can significantly simplify your components 99% of the time. It was very easy to have huge componentDidMount and componentDidUpdate methods in class components, and with logic scatter shot across a big file without the ability to easily reuse bits of it.

0 comments

cageface5y ago

I converted a medium-sized React codebase from classes to hooks. In most cases it simplified the components and eliminated boilerplate. But it also introduced more than a few very tricky bugs and serious performance regressions that were not trivial to fix.

com2kid5y ago

I have yet to see any real code that got simpler from hooks.

I have classes that need to do stuff when they appear on screen and that need to clean up when they are unmounted. They also have some local state.

Hooks make doing all that messier. Class components make doing it easy to read and sensible.

valand5y ago

React team made the wrong separation of problems with hooks.

Class component should lose its ability to render and replace it with attach functional renderer. In its place, class component should have composable and detachable state and substates with their own lifecycle, each communicating via events within the same context.

It will be truer to `ui = fn(state)` principle.

This is a result of contemplation after learning what the functional people and rust community are doing, and then coming back in front of my laptop showing my professional project in React and TypeScript.

Unstated (https://github.com/jamiebuilds/unstated) is a library that helps scoping and lifecycle separation.

I used in-house event library but there are a couple of libs out there providing this functionality like https://github.com/KeesCBakker/Strongly-Typed-Events-for-Typ...

It took me months to experiment and reach the decision which finally helps the team to write and iterate faster. I hope this will help everyone facing those React problems.

j / k navigate · click thread line to collapse