React Blog

> React would be responsible for which elements need to be created and which can be updated in place. That works for simple, read-only components. The moment the component starts managing its own interactivity you end up needing state, and at that point things break down. If you need to change props, you have to essentially recreate the component by changing key [1], and at that point, what is the benefit of React? [1] https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-deri…

I think Adrian Bogden has some pretty great content if you already understand React and he gets into some advanced concepts within hooks which React has shifted to over classes. https://www.youtube.com/@bogdanadrian9725/videos React docs: Should I use Hooks, classes, or a mix of both? When you’re ready, we’d encourage you to start trying Hooks in new components you write. https://legacy.reactjs.org/docs/hooks-faq.html#should-i-use-hooks-clas…

JSX has not been compiling to createElement() for a while. (If you have the modern transform enabled.) We're not removing createElement but I'd recommend to change your wrappers to the same compile output that the new JSX transform (introduced in 2020) uses: https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-tra… The new JSX compile target will allow us to do a bunch of optimizations in the future that createElement() can't. I'll make a note of adding this to the docs.

> None of these are problems taken separately, but put together they're pretty frustrating. Hooks being 5 years old and being the predominant tool for certain tasks shows that the community only figured out how to solve a particular problem 5 years ago. Hooks are ~~7~~ 6 years+8months old, almost 7 years. This may not seem like a significant difference, but IMO it puts them 75% of the way back in time to when react took off versus 50% of the way. That is a significant difference. Please stop repeating the 5 year number. It's _provably_ wrong and not a matter of opinion: https://legacy.reactjs.org/blog/2019/02/06/react-v16.8.0.html > does not seems like something a stable ecosystem would do. I don't think being a 'stable ecosystem' means owning every part of the dev process, or even most of it; nor have they ever intended to do so (they didn't reimplement npm, webpack, etc). CRA existed to fill a particular need for a time (providing a simpler/more stable interface in front of webpack), and when that was no longer needed by the community, they abandoned it. I don't understand why this matters. Better tools emerged, the React docs/guidance reflect that. > because I inherited a simple site that should have never used React I'm sorry that you're in that situation. The React community is not really responsible for that IMO, and I don't think the things you've highlighted have meaningfully contributed to making that worse. I stand by the fact that deprecating CRA once great…

> React pre and post 16.8 are two completely different libraries. The two apis still coexist within the same library. > The useEffect hook was presented as something which let's you split your code based on logic instead of component lifecycle, and few examples were there showing how the new effect concept better splits the async logic which was previously a solid mess inside the componentDidMount/Update. That is exactly what I mean by the word "alternative". As in, previously, you achieved certain results by calling componentDidMount/DidUpdate methods; now, in order to achieve same results, you would use the useEffect in a certain way. > Update the state during render? what? See "Adjusting some state when a prop changes" section of "You Might Not Need an Effect" > if you need to read something during render you need to use State, and if you need a reference to a variable outside of React you use Ref Sure. But what if during a render you want to check something in the DOM (geometry of a DOM node or something). I do not think that pre-2019 there were any guidelines that you mustn't. There weren't any such recommendations after the hooks were released either, when all we had to go by was the hooks api documentation in what now is the legacy documentation site [0]. The caution against doing this only appeared in the new react docs in 2022. My point here is that the docs change, and the patterns of usage of the library change, and what was considered ok once no longer is.…

I can objectively prove that React devs themselves have at the very least changed how they understand hooks but more likely have been making it up as they’ve gone along. The best example is one of the more problematic hooks, useEffect. Here’s how useEffect is described in the old documentation: https://legacy.reactjs.org/docs/hooks-effect.html > The Effect Hook lets you perform side effects in function components Here’s how the new docs explain useEffect: > useEffect is a React Hook that lets you synchronize a component with an external system. These are dramatically different claims about what useEffect is supposed to be for. Dig a little deeper and Reaft developers will now explicitly tell you to not use useEffects for side effects, which again is the opposite of what they explained it to be. The same change in how they’re actually supposed to be used has been true across all the books to a lesser or greater degree. Maybe React has finally stabilized and it’s easier for new devs because they’re learning the more stabilized version. However, I suspect it’s easy because they just happen to be within the same cycle of understanding in React. Much like how React was easy for devs coming to it nearly a decade ago, until the devs changed everything about it. New devs may just not be deep enough into the new cycle to experience the pain of all your understanding being wrong. Now, to be completely clear, I have no problem with the changes. I think change is good and I…

I think you're hung up on JSX being HTML - it isn't HTML and doesn't try to be. The "JS" stands for "JavaScript" and the "X" stands for XML, not HTML. > However, that means, that now one has something, that is neither looking like HTML, nor is it looking like JS, even if it may be JS through some pre-processing (but then actually it is not really JS?). Yes, it's not HTML or JS, it is JSX. It's an XML-based syntax to declaratively write JavaScript. It's optional too - one can write the function calls directly in JS, and indeed that's what people did before JSX existed. `React.createElement("div", React.creatElement("span"),...)`. It could be worth using a REPL [1] to gain an intuition of the JavaScript that is produced from transforming different JSX examples. > The result is, that one has to learn some different syntax that is specific to React. JSX was originally created for React, but now is not specific to React, other libraries and frameworks use it as well. It's a general purpose XML-based syntax for writing JavaScript declaratively. And yeah, if you want to use JSX you have to learn it. It's easy to learn if you know JavaScript and XML and shouldn't take very long. It's XML and then anything inside curly braces is a JavaScript expression. If you're using TypeScript replace everything "JS" I'm saying with "TS", it's the same result. And obviously type checking works without issue because it's a syntactic transformation to TS, not a semantic transformation. > In a…

> Note that is also possible to create a new properties and signals for the Text which can be referenced by the children This behavior exists without inheritance as well! Let's imagine we want to use our existing `HelloText` component. But like you suggested, let's subscribe to the `onclick` signal and add a `bolded` property. When the user clicks the text, it will toggle the bolded property. We will use React because it's famous for not using inheritance. ```jsx function HelloText(props) { return <Text {...props}>Hello World!</Text>; } export default function App() { const [bolded, setBolded] = React.useState(false); return <HelloText onClick= {() => setBolded(bold => !bold) bold= {bolded}} /> } ``` And just like you wanted, even children of `<Text>` could reference `bold` and `onClick`. I'll assume you know what that would look like. If not, let me know and I'm happy to make examples for that too. You can provide default prop values that can be overridden. You can accept functions. You can expose signals. If you are being attentive, you might have noticed the code that enables this behavior: ` {...props}` is the explicit way to pass all the props from the parent `HelloText` to its child `Text`. Unlike React, exposing props is implicit and automatic in QML. Though its trivial to make every component expose all their props to their children, the docs argue that you should avoid this. They say that if you find yourself doing this a lot, you are probably…

It’s very clear useEffect was created with a certain purpose and then the React folks realized that was a terrible use of it and changed the purpose of useEffect. And this would have been fine if they had been upfront about how they were wrong about useEffect and how now this is the correct way to do it. But instead, they’ve at best kept silent about this transition, and a lot of people strongly attached to React have decided to gaslight everyone else about useEffect (I’m a huge React fan… it’s my default UI library but that doesn’t mean I’m ok with gaslighting over transparency). And the easiest way to prove this is to compare the docs. Original: https://legacy.reactjs.org/docs/hooks-effect.html > The Effect Hook lets you perform side effects in function components: New: https://react.dev/reference/react/useEffect > useEffect is a React Hook that lets you synchronize a component with an external system. Synchronizing with an external system is completely different behavior from performing side effects. And we know the original intention was to perform side effects and not sync with external systems because the name of the hook is useEffect and not useSyncExternal. Unless the React team always had the new intention but deliberately decided to mislead everyone through the original documentation and by misnaming the hook, but I don’t think even the biggest React hater thinks so poorly of them, and I’m a fan.

createElement still exists, but the JSX compiler doesn't use it anymore; see https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-tra… Regardless of whether you use JSX or createElement, you can't just call MyComponent({ attr: “yes” }) directly, is the main point.

> React doesn't provide a way to explicitly bind to properties and events of DOM elements We can nitpick this point because react has had a ref API for at least 5 years now. Given a ref, all DOM API are available. For events, SyntheticEvent will refer to a native event if it exists. The SyntheticEvent abstracts vendor discrepancy. Under the hood, react can apply some optimization too. https://legacy.reactjs.org/docs/events.html https://react.dev/reference/react-dom/components/common#react-event-ob…

Did hoc intentionally pun by writing that this meta analysis is getting “lifted”? Reference: https://legacy.reactjs.org/docs/higher-order-components.html

Random JSX nugget: JSX is a descendant of a PHP extention called XHP [1] [2] [1] https://legacy.reactjs.org/blog/2016/09/28/our-first-50000-stars.html#… [2] https://www.facebook.com/notes/10158791323777200/

What specifically are you referring to? The original `createClass` API was indeed deprecated and removed all the way back in 2017 [0]. You can still use them today with the separated `create-react-class` package. ES6 class components still work as-is even in React 19 - it's just the legacy context feature that's been removed. They're generally discouraged, in that function components are now the standard way to use React, but they're still not "deprecated" in the sense of a warning or removal. [0] https://legacy.reactjs.org/blog/2017/09/26/react-v16.0.html#packaging

I cover this in another post [1], but broadly: - Not every web app is perf-sensitive to every extra kB (eCommerce is, productivity tools typically aren't) - Plenty of frameworks have tiny runtimes, e.g. Svelte is 2.7kB [2] - I wouldn't advocate for 100 different frameworks on the page, but let's say 5-6 would be fine IMO No one is arguing that this is ideal, but sometimes this model can help, e.g. for gradual migrations or micro-frontends. BTW React 17 actually introduced a feature where you could do exactly this: have multiple versions of React on the same page [3]. [1]: https://nolanlawson.com/2021/08/01/why-its-okay-for-web-components-to-… [2]: https://bundlephobia.com/package/[email protected] [3]: https://legacy.reactjs.org/blog/2020/10/20/react-v17.html

> "useEffect" [...] this function is absolutely not intuitive 100%. I've found `useEffect` is an effective foot-shotgun, even I still blast away some toes with it. What makes it some weird to me from the start (React 16.8, ~2019) is how they folded several, clearly named, lifecycle methods into this one callback. The motivation for this change [1] informs me that maybe I've just never worked on Facebook-scale front-ends or I've just forgotten the pain of explicitly having to write all those methods, but I rather liked their separation. [1]: https://legacy.reactjs.org/docs/hooks-intro.html#complex-components-be…

Since people in the early days of React would ignore errors thrown by components (or the React library itself) and constantly run into literal undefined behavior, React eventually adopted a behavior where it unmounts the VDOM to catch the developer's attention.[0] When a component throws an error, React will unmount to the nearest error boundary. By default, this is the root of the tree. You can control how much gets unmounted with error boundaries. I've never used Vue so I have no idea how error handling works there, but React also offers programmatic ways to recover from errors (e.g. error boundaries can retry rendering the failed component with different state or props). Doesn't sound strange to me. [0] https://legacy.reactjs.org/docs/error-boundaries.html

Facebook was a fairly static site back then, but small is a relative term here. I don't mean to say it was only meant to do that. Just that the origins of React are a far cry from the complexity of SPA frameworks like Next JS. And it can still be used as quite a simple drop in component system. Nothing is stopping you from doing that. Which is why people often say React is not a framework but a library, because it's true. https://legacy.reactjs.org/blog/2013/06/05/why-react.html

> "useMemo doesn't prevent that, but React.memo can" You can definitely use useMemo with JSX elements to prevent child components from being re-rendered too often. There's an example right in the React Hooks FAQ where it reads: "Conveniently, useMemo also lets you skip an expensive re-render of a child" https://legacy.reactjs.org/docs/hooks-faq.html#how-to-memoize-calculat… AFAIK there's no magic to React.memo. It's basically a shorthand for useMemo that takes the props as the dependency.

Interesting note: React itself uses the Closure Compiler https://legacy.reactjs.org/blog/2017/12/15/improving-the-repository-in…

The Meta team introduced Server Components: https://legacy.reactjs.org/blog/2020/12/21/data-fetching-with-react-se…

Ahh well the setter functions are excepted for the exhausted-deps rule, which is why I hadn't encountered it: https://legacy.reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-func… > (The identity of the setCount function is guaranteed to be stable so it’s safe to omit.) Maybe in JS it still warns in your example because setData is passed in from calling useResource, but at least with Typescript I'm pretty sure eslint infers this

Application error: a client-side exception has occurred (see the browser console for more information). Showing this error in the console. https://legacy.reactjs.org/docs/error-decoder.html/?invariant=418

A less amusing name, but similar effect – `dangerouslySetInnerHTML` from React. https://legacy.reactjs.org/docs/dom-elements.html#dangerouslysetinnerh…

New docs don't tell you how to get a minimal start anymore. You MUST fully commit to a create-react-app flow or similar, or they vaguely point you in the direction of Babel without explicit direction. The formal way of using React and JSX without a full SPA framework is only listed here: https://legacy.reactjs.org/docs/add-react-to-a-website.html

JSX is compiled into plain old Javascript react code. Or at least it used to, but I don't know if it still does - I don't use react these days: https://legacy.reactjs.org/docs/introducing-jsx.html

To be more accurate, React uses its virtual DOM implementation. https://legacy.reactjs.org/docs/faq-internals.html

That has been possible for some time with Babel[0] and was also referenced in the old React docs[1]. But, as stated there and in the sibling comment here, it's not really suitable for production use. [0]: https://babeljs.io/docs/babel-standalone#script-tags [1]: https://legacy.reactjs.org/docs/add-react-to-a-website.html#quickly-tr…

React never was truly reactive. Even according to its devs. https://legacy.reactjs.org/docs/design-principles.html#scheduling

> JSX may remind you of a template language, but it comes with the full power of JavaScript. [0] That's the difference. I don't want to relearn how to do for and if-statements. [0] https://legacy.reactjs.org/docs/introducing-jsx.html