React VS Stimulus

React has come a long way over the last 10 years and the framework has undergone some major changes in the way it works. The legacy docs didn’t favour new developers who had to learn React twice - once with class components and then once again with Hooks. The new docs teach modern React and have a much better structure with more interactive examples, opinions and a better colour scheme (imo 😂). There are a lot of changes so, I wanted to outline my favourite things and why:

Now the new react documentation have been released they have pretty good examples. Go through it https://react.dev/

Regarding page rendering with Next.js, pre-rendering is a fundamental component. It is a key feature of Next.js, which means that static HTML content is generated in advance rather than dynamically on each request. When comparing the page source of a traditional React.js web app and a Next.js web app, it is clear that the Javascript code is loaded before the contents are rendered to the user, which is a bad user experience. However, when inspecting the contents of a Next.js page source, the HTML is already generated with all the necessary data, making Next.js the most efficient method for improved web performance and user experience.

In this blog tutorial, we will see how we can setup a ReactJs project with Typescript, styled-components and redux toolkit.

React has stated that this will be supported in the future. However that issue is old enough to be in kindergarten. So I'm looking for a nice easy abstraction in the meantime.

A bare closure would always see the latest values because it closes over them during render. And the latest useEffect closure will have closed over that method..

Here is the test suite for useEffectEvent and the test ensuring it does not provide a stable reference: https://github.com/facebook/react/blob/main/packages/react-r...

And then a wild 'exhaustive-deps'[0] appears!

[0]: https://github.com/facebook/react/issues/14920

React.js - for our frontend

The now-legacy documentation could originally be found at reactjs.org; this now redirects to the brand-new react.dev domain. When the new docs were still in beta, they were hosted at beta.reactjs.org, which now also redirects to react.dev. The original documentation can still be found, for those who need it, at legacy.reactjs.org. This was done to make a fresh start and clear separation between the current vs. legacy documentation.

I find this to be a very nice high-level explanation: https://medium.com/@ryardley/react-hooks-not-magic-just-arra...

In reality we use a linked list rather than an array. If you wanna dive into the code, I can give some pointers. For example, useState is implemented like this during first render (https://github.com/facebook/react/blob/87c803d1dad7e5fe88634...) and like this during next renders (https://github.com/facebook/react/blob/87c803d1dad7e5fe88634...).

However, _conceptually_ I'd recommend to think of Hook return values similar to "extra inputs" to your function, kind of like extra arguments. There are different ways to formalize it in different languages. We picked plain function calls for simplicity and low overhead, although you could imagine `yield` with generators or something like that.