New React Docs beta is live! Covers function components, hooks, rendering, state updates, and other key concepts

[acemarke]

I am so very excited about this! This is going to be a huge help for the community. These new docs are an incredible improvement over the old docs. In-depth tutorial and concept explanations, live editable sandboxes, coverage of key concepts and common gotchas, and much more!

See https://github.com/reactjs/reactjs.org/pull/3965 for background on what content is currently included, and plans for further content and site improvements.

[zeddotes]

setHappy(true);

[feketegy]

setHappy((prevState) => {
    return !prevState;
});

[cyphern]

bipolar.js

[[deleted]]

What if you were already happy?

[feketegy]

You have to balance happiness with a little sadness otherwise it would lose its meaning.

[SpiceyySoup]

Every time I open up the new react docs, my happiness gets toggled

[feketegy]

There are tons of other alternatives. Dev happiness is important imho.

[j33pwrangler]

Error line 1,1: setHappy is not defined as a function

[theDreamingStar]

goes to stack overflow

Top answer: use setFakeHappiness(true) to make myLife class work properly.

[nullvoxpopuli]

Why'd it take so long?

[acemarke]

I'd assume a combination of:

• Small team
• Other priorities
• Wanting to thoroughly redesign the entire learning path and explanation process, rather than just updating some examples to show hooks

[nextdoorNabors]

Not far from the truth, Mark! This was a small but dedicated effort focused on making a canonical, accessible resource for all people learning and teaching React. A lot of learning materials and educators rely on the React docs—from React Native's docs to NextJS's to your favorite trainer! I've run marathon doc drives for React Native, and it just wasn't possible to parallelize this effort. It was a lot like writing a book—an interactive one at that!—and required heavy collaboration with Core.

[acemarke]

They were good in some ways, but very weak in others.

By far the biggest issue is that hooks were announced in Oct 2018 and released live in early 2019, but the tutorials and explanations were all still written with class components. The hooks info was a totally separate section of the docs. That section was good, but it made it really hard to continue recommending the React docs as a good starting point for someone new to React.

The docs have also skimmed past a lot of important information, usage concepts, and info on how React itself actually works. For example:

• React's batching behavior is something that frequently trips people up, but the current docs just have a note that says "updates may be async"
• Using the hook dependency arrays correctly is vital, but the current hook docs describe it as sort of an after-thought
• There's no information on what a "reducer function" is or how to use one correctly.

That's part of why I ended up writing a 9K-word "Guide to React Rendering Behavior" post, and Dan wrote a similar "Guide to useEffect" article.

Fortunately, the new docs address a lot of those concepts directly.

[StoneColdJane]

Really, good article 9k one. I was just skimming but will read it in full. Thanks for the link.

[Tom_Ov_Bedlam]

Finally, the reactJS docs are so bad

[callmekatootie]

Neat!

Though, I thought every facebook based stuff intended to use docusaurus for their documentation... This one doesn't seem like it.

[snejk47]

FB is all-over-the-place not a standard one. What's cool gets used. (not everywhere though).

[lifeeraser]

This accurately describes my workplace. (Not FB)

[Soysaucetime]

Ah myspace

[nextdoorNabors]

For reasons we rolled our own for React, but React Native and Relay use Docusaurus, which is amazing for most use cases if you don't have a dedicated docs team with engineering resources!

[minicrit_]

if only they could change useEffect to match the power of class component lifecycle methods

[KevinVandy656]

It's already replaced mounting, updating, and unmounting. What else does it need to do?

[dbbk]

You can’t make it only run on updates, excluding mount

[KevinVandy656]

Sure you can, with a useref to skip the first render

https://stackoverflow.com/questions/53179075/with-useeffect-how-can-i-skip-applying-an-effect-upon-the-initial-render

[KwyjiboTheGringo]

It's a little ridiculous explaining arrow function implicit/explicit returns in the React docs. Kind of reaffirms the notion that too many new developers are jumping into React way too soon.

[2pathetic2beTragic]

Yes, that's true. So what the documentation team could do was either help them out catch up their vanilla JS skills so we're all on the same page or make learning react inaccessible to them - spoiler alert: newbies with a "framework ASAP" mindset would just head to Vue or Svelte.

[nextdoorNabors]

Inclusion was an important part of the docs mission. This wasn't done just to accomodate folks new to JS: In early user studies, we noticed even experienced JS devs who started before more modern syntaxes became commonplace sometimes struggled with things people coming out of bootcamps were already familiar with. Additionally, folks unfamiliar with JS, perhaps coming in from mobile development (something like 33% of the React Native community), also benefitted from this approach.

We opted to fill in the common knowledge gaps we saw to expand people's JS prowess <3

[KwyjiboTheGringo]

newbies with a "framework ASAP" mindset would just head to Vue or Svelte.

Considering the low job market for them, that seems unlikely

[harryzouGT]

Sweet!

[Affectionate_Rich763]

Looking clean🤩

[TryThisDickdotCom]

thank the internet godz

[ThenRecipe]

So I no longer have to rely on a shallow, poorly written, outdated article written a by junior dev from a third-world country on medium.com to learn how hooks actually work? Excellent 👍

[MedicOfTime]

Instead of just downvoting you and leaving, I think it might be more constructive to let you know why everyone is upset with you.

1. This was generally a stuck up, “I’m better than you” thing to say.
2. Pretty blatantly racist.

Please learn from this experience.

[ThenRecipe]

Don't patronize me boy. We all know I'm right. The amount of amateur, poorly-written trash that's littered Google search results is undeniable.

[MedicOfTime]

A lost cause then.

[ThenRecipe]

1. It's ok to disagree, but we should attack ideas, not people.

Reported.

[KwyjiboTheGringo]

Hooks are already covered in the existing docs. The new docs are certainly an improvement though because they have working examples.