= React
{c}
{wiki=React_(JavaScript library)}
= React.js
{c}
{synonym}
= React
{c}
{disambiguate=JavaScript library}
{synonym}
Website: https://reactjs.org
React officially recommends that you use <Next.js>https://reactjs.org/docs/create-a-new-react-app.html#recommended-toolchains{ref}, so just do it. It just sets up obvious missing functionality from raw React.
React feels like a good. But it also feels impossible to use/learn sometimes.
Its main design goal is to reduce DOM changes to improve rendering times.
And an important side effect of that is that it becomes easier to do stuff of the type:
* user creates a new comment that appears on screen without page reload
* comment has a delete button, which is JavaScript callback activated
and then the new comment easily gets the callback attached to it.
And it also ends up naturally doubling as a template engine.
But React can also be extremely hard to use. It can be very hard to know what you can and cannot do sometimes, then you have to stop and try to understand how react works things better:
* <cannot update a component while rendering a different component warning in React>
* Rendered more hooks than during the previous render.
* cannot use hooks from helpers:
* https://www.benmvp.com/blog/helper-functions-react-useeffect-hook/
* https://stackoverflow.com/questions/68273638/using-hooks-inside-helper-functions
* https://stackoverflow.com/questions/64689409/helper-function-using-hooks-inside-a-functional-component
The biggest problem is that it is hard to automatically detect such errors, but perhaps this is the same for other frontend stuff. Though when doing <server-side rendering>, the setup should really tell you about such errors, so you don't just discover them in production later on.
Is is also very difficult to understand precisely why hooks run a certain number of times.
Examples under: \a[react].
* <react/hello.html>{file}
* \a[react/hello-func.html]: Hello World with a <React function component> instead of classes. At page load console shows:
``
Main
``
and then after each click:
``
onClick
Main
``
so we understand that `Main` insanely functions both as the constructor and as the render function in <React function components>.
* \a[react/hello-func-use-callback.html]: same as \a[react/hello-func.html] but with useCallback. TODO no advantages in this case? When does it help?
* \a[react/hello-without-jsx.html]: Hello World in pure <JavaScript>, without <JSX>. Exactly equivalent to \a[react/hello.html]. Documented at: https://reactjs.org/docs/react-without-jsx.html Understanding this is fundamental to understanding React.
* \a[react/prop-change.html]: shows what gets called as parameters flow down through the tree.
By looking at the console, we see all `render` get called every time, even if `props` didn't change, but not the constructors.
After page load the console contains:
``
Main.constructor
Main.render
NotMain.constructor
NotMain.render
NotMain2.constructor
NotMain2.render
``
Then, every time we click the button it adds:
``
handleClick
Main.render
NotMain.render
NotMain2.render
``
Note how the `props` of `NotMain` only change every other click, but `render` still gets called every time.
In order to make `React` not re-render when there are not changes, you have to either:
* define the `shouldComponentUpdate` method of class components
* wrap functional components in `React.memo`
Related:
* https://stackoverflow.com/questions/61301937/why-is-react-component-rerendering-when-props-has-not-changed
* https://stackoverflow.com/questions/67214500/why-react-rerendres-components-even-if-props-didnt-changed
* \a[react/prop-change-hook.html]: same as \a[react/prop-change.html], but using hooks. The notable difference is that functional components don't have a clear constructor/render separation, the function just gets called every time. Then React does some magic to ensure that `useState` returns the current state, except for the first render where they return the initial value.
* \a[react/prop-change-hook-use-memo.html]: TODO forgot if this example is useful, was tring to use `useMemo`
* \a[react/prop-change-child.html]: shows what child prop changes do not call render on parent, `Main` does not show up on console when you click under `NotMain`
* \a[react/hook-from-function-fail.html]: TODO got some errors that seemed linked to this on a larger program, but failed to minimize them here
* \a[react/hook-different-number-of-times.html]: this illustrates one of the cardinal points of using hooks: you must always call them the same number of times, otherwise it fails with:
> React has detected a change in the order of Hooks called by Main. This will lead to bugs and errors if not fixed.
In the case of `useState`, we can kind of understand why this happens: React must use the order of calls to determine which state variable to return at each point in time.
* \a[react/hello-hook-use-effect.html]: just checking when it gets called. Happens after every render
``
handleClick
Main
useEffect
useEffect2
``
* TODO create a test `\a[react/img-broken.html]`
* https://stackoverflow.com/questions/34097560/react-js-replace-img-src-onerror
* https://stackoverflow.com/questions/36305805/how-to-hide-alt-text-using-css-when-the-image-is-not-present
How React works bibliography:
* https://www.netlify.com/blog/2019/03/11/deep-dive-how-do-react-hooks-really-work/ shows how `uesState` works under the hood with crazy closures
* https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e
\Video[https://www.youtube.com/watch?v=HyWYpM_S-2c]
{title=React for the Haters in 100 Seconds by Fireship (2022)}
Back to article page