Website: reactjs.org
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:and then the new comment easily gets the callback attached to it.
- user creates a new comment that appears on screen without page reload
- comment has a delete button, which is JavaScript callback activated
And it also ends up naturally doubling as a template engine.
But React can also be extremelly 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: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.
- 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:
Is is also very difficult to understand precisely why hooks run a certain number of times.
Examples under: web-cheat/react.
- web-cheat/react/hello.html: minimal example. As you click:By opening a web inspector, you can see that only modified elements get updated. So we understand that JSX parses its "HTML-like" into a tree, and then propagates updates on that tree.
- one counter increments every time
- the other increments every two clicks
By looking at the terminal, we see thatrender()
does get called every time the button is clicked, so the tree gets recreated every time. - web-cheat/react/hello-hook.html: Hello World with hooks instead of classes, but also that is fully correct and optimized. Exactly equivalent to web-cheat/react/hello.html.
React.useState
plays the role of the constructor.Hooks were introduced much after classes, and just require less code, so everyone is using them now instead of classes.It appears that the hello world in the React.js docs is wrong though, you need functional sets to update values based on their current value: stackoverflow.com/questions/375913/how-can-i-profile-c-code-running-on-linux/60265409#60265409, otherwise you could lose updates. ThesetTimeout
example from stackoverflow.com/questions/57828368/why-react-usestate-with-functional-update-form-is-needed/65306828#65306828 is particularly relevant. A real world case would be that but waiting for network requests to update.We cannot reproduce a quick double click faliure without the functional update however, not even withe = document.getElementById('button');e.click();e.click()
. - web-cheat/react/hello-without-jsx.html: Hello World in pure JavaScript, without JSX. Exactly equivalent to web-cheat/react/hello.html. Documented at: reactjs.org/docs/react-without-jsx.html Understanding this is fundamental to understanding React.
- web-cheat/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 ifprops
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 theprops
ofNotMain
only change every other click, butrender
still gets called every time.In order to makeReact
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
- define the
- web-cheat/react/prop-change-hook.html: same as web-cheat/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. - web-cheat/react/prop-change-hook-use-memo.html: TODO forgot if this example is useful, was tring to use
useMemo
- web-cheat/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 underNotMain
- web-cheat/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
- web-cheat/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 ofuseState
, 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. - web-cheat/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[web-cheat/react/img-broken.html]
How React works bibliography:
- 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 - medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e
Framework built on top of React.
Basically what this does is to get server-side rendering just working by React, including hydration, which is a good thing.
Next.js sends the first pre-rendered HTML page along with the JavaScript code. Then, JavaScript page switches just load the API data.
Next.js does this nicely by forcing you to provide page data in a serialized JSON format, even when rendering server-side (e.g. the return value of
getServerSideProps
). This way, it is also able to provide either the full HTML, or just the JSON.Some general downsides:
- it does feel like they don't document deployment very well however, especially non-Vercel options, which is the company behind Next.js. I'm unable to find how to use a non Vercel CDN with ISR supposing that is possible.
- Next.js is very opinionated, and like any opinionated library it is sometimes hard to know why something is/isn't happening, and sometimes it is hard/impossible to do what you want with it unless they add support. They have done good progress, but even as of 2022, some aspects just feel so immature, some major-looking use cases are not very well done.
In theory, Next.js could be the "ultimate frontend framework". It does have a lot of development difficulties that need to be ironed out, but the general concepts, and things it tries to integrate, including e.g. webpack, TypeScript, etc. are good. Maybe the question is when will someone put it together with an amazing backend library and dominate and finally put an end to the infinite number of Js Frameworks!
In-tree examples at: github.com/vercel/next.js/tree/canary/examples
In order to offer its amazing features, Next.js is also extremely opinionated, which means that if something wasn't designed to be possible, it basically isn't.
No prerender with custom server? It forces you to write your API with next as well? Or does it mean something else?
TODO can it statically generate pages that are created at runtime? E.g. if I create a new blog post, will it automatically upload a static page? It seems that yes, and that this is exactly what Incremental Static Regeneration means:However, Ciro can't find any mention of how to specify where the pages are uploaded to... this is pat of the non-Vercel deployment problem.
- github.com/vercel/next.js/discussions/25410
- vercel.com/docs/next.js/incremental-static-regeneration
- github.com/vercel/next.js/discussions/17711
- www.reddit.com/r/nextjs/comments/mvvhym/a_complete_guide_to_incremental_static/
- github.com/vercel/next.js/discussions/11552#discussioncomment-115595
- stackoverflow.com/questions/62105756/how-to-use-aws-with-next-js
- github.com/vercel/next.js/discussions/17080
- github.com/vercel/next.js/discussions/16852
Can't ISR prerenter by URL query parameters:
That plus the requirement to have one page per file under
pages/
leads to a lot of useless duplication, because then you are forced to place the URL parameters on the pathnames.Overviews:
- www.reddit.com/r/reactjs/comments/8evy5d/what_are_the_downsides_to_nextjs/ 2017 What are the downsides to Next.js?
Our oxamples under nodejs/next:
- nodejs/next/hello-world: a hello world. There's an in-tree one at: github.com/vercel/next.js/tree/e75361fd03872b097e817634c049b3185f24cf56/examples/hello-world, but ours is truly minimal
- nodejs/next/hoc: shows how to use a higher order component (HOC) to factor out
getStaticProps
across two pages: nodejs/next/hoc/pages/index.js and nodejs/next/hoc/pages/notindex.js - nodejs/next/typescript: simple TypeScript example, minimized from: github.com/vercel/next.js/tree/d61b0761efae09bd9cb1201ff134ed8950d9deca/examples/with-typescriptNotably, that shows how
require
errors are avoided in that case as mentioned at: stackoverflow.com/questions/64926174/module-not-found-cant-resolve-fs-in-next-js-application/70363153#70363153 - nodejs/next/localStorage: a counter that is persistent across page reloads by using
localStorage
. Used in: stackoverflow.com/questions/54819721/next-js-access-localstorage-before-rendering-page/68136224#68136224
Solved ones:
- solved by preview mode in Next.js 12:
- ISR was basically unusable for CRUD websites because you can't force a one-off immediate page update: