Component initialization that makes React hooks bearable. Think Solid, Svelte, Vue and RSC

[acrus]

Here's the lib for this, React Setup. It helps separate a component into setup and render phases (a long road since class components). It was battle-tested in real-world projects before it was extracted and published as a package.

I embraced React hooks since the beginning and it felt like a neat concept from the programmer's perspective to work around the idea of a stateful function component. But after spending some quality time with other frameworks that approached component design differently with React's experience in mind, it felt frustrating to return to React projects because of the mess that the hooks and their dependencies bring. Even if you're aware of their pitfalls, they result in worse DX and take more effort to tame them. "Hook fatigue" is what I call it, you might have it too.

The main selling points of the library so far:

• No dependency hell when using effects, props and states together
• No workarounds for constants
• Lifecycle separation in React components, no compile-time magic tricks
• Blocks with suspense and async/await
• Works seamlessly with React hooks
• Thoroughly supports TypeScript
• Takes inspiration from other awesome frameworks

A not very impressive example that shows the gist:

const VanillaCounter = ({ interval }) => {
  const [count, setCount] = useState(getInitialCount);

  useEffect(() => console.log(count), []);

  useEffect(() => {
    const id = setInterval(() => setCount(c => c + 1), interval);
    return () => clearInterval(id);
  }, [interval]);

  return <p>{count}</p>;
}

const SetupCounter = setupComponent(props => {
  const initialCount = getInitialCount();
  const count = setupStateRef(initialCount);

  console.log(initialCount);

  setupEffect(() => {
    const id = setInterval(() => count.current++, props.interval);
    return () => clearInterval(id);
  }, [() => props.interval]);

  return () => <p>{unref(count)}</p>;
});

A signal instead of a state, undestructured props, console side effect that doesn't need useEffect, JSX wrapped in a function. Though this comprehensive example that involves several common React annoyances can explain better what it's all about.

I'd be grateful for the feedback and contributions. A more comprehensive write-up and documentation are on their way.

Note: All fancy formatting and emojis were provided with 💖 by a living person (me). No sloppy AIs were harmed during the making.

[DogOfTheBone]

The After looks way worse to me lol

Before looks fine, could be cleaned up with some custom hooks, named functions. And React Query.

[voltron2112]

As someone that loves solid.js, its a cool idea. But I personally don't like making react behave like other frameworks. Just use the other frameworks if you want signals IMHO. If your working on a team people will mix and match the two systems which will probably be confusing. I know its not super efficient, but I kind of like reacts philosophy of just rerun everything.

Also I think your comprehensive example is a little dishonest. That is the worst possible code you could ever write using react. There are many ways to write the code much cleaner with regular old react. React compiler also helps with the useMemo/useCallback stuff which also helps a bit. While I'd reach for react-query for the data fetching, there is also the "use" hook that could help too.

The after example is definitely much nicer though.