DEV Community

Cover image for My 5 favourite updates from the new React documentation

My 5 favourite updates from the new React documentation

Anisha Malde on March 31, 2023

So you read the article title and are probably asking yourself “How can she possibly have a favourite thing about tech docs?” Or, you read the new ...
Collapse
 
gersondias profile image
Gerson Dias

I'd like to know the benefits of that destruction thing... It's anoying to not know if a variable came from component props or from a state or something... I'm team props.name

Collapse
 
drewkiimon profile image
Andrew Pagan

When destructuring, you're also able to re-name the variables. So, for example,

const Component = ({name}) => ...
Enter fullscreen mode Exit fullscreen mode

Can we re-written as

const Component = ({name: propName}) => ...
Enter fullscreen mode Exit fullscreen mode

And you can reference it now as propName instead of name, but to be honest, at this point you should just rename the prop to something else.

Collapse
 
anishamalde profile image
Anisha Malde • Edited

Hey Gerson, I personally find the benefits of destructuring props are:

  • It's less lines of code, for example:
const { starter, main, dessert } = menu;
Enter fullscreen mode Exit fullscreen mode

is equivalent to:

const starter = menu.starter
const main = menu.main
const dessert = menu.dessert 
Enter fullscreen mode Exit fullscreen mode
  • I think its much easier to read
  • You only pass what you need
  • It allows for easier debugging

I also think with the use of hooks within your component it's easier to see if the variable is coming from state. However, I would love to hear more on your perspective?

Collapse
 
gersondias profile image
Gerson Dias

Well, using just prop.something is even less lines and u know at bottom of your method what is a prop, what is something else. But I see the point when not using typescript...

Collapse
 
bytebodger profile image
Adam Nathaniel Davis

YES. There's quantifiable value in having the props. namespace.

Collapse
 
mfvtw profile image
M

I agree

Collapse
 
kevduc profile image
Kevin Duconge • Edited

Amazing article! So great to get a highlight of what has changed when it's such a big doc update, thank you Anisha!
If I had to pick a top 1, for me it would be this guide, You Might Not Need an Effect, I can't emphasize enough how many times I've fallen (and seen other people fall) for these anti-patterns!
(also I can't wait for useEffectEvent!)

Collapse
 
nans profile image
Nans Dumortier

Yeah this one is a must read !

Collapse
 
anishamalde profile image
Anisha Malde

Totally agree, it's a great article! Thank you for sharing!

Collapse
 
raibtoffoletto profile image
Raí B. Toffoletto

I haven't read them but I'm sooo glad to see this changes!!

In the end of 2020 I had a colleague asking me : how should I start learning React?. And I had to tell him to go to the official docs to get a grasp of it but be aware that he would need to forget everything because we use functional components and hooks now.

I even started (and never finished) to rewrite the tic tac toe guide using FC.

I'm so glad people won't need to go through this anymore 😁😁

Thanks for the article. 🎉🎉

Collapse
 
ypdev19 profile image
Yuli Petrilli

Wow i didn't know they are finally getting rid of class components, that's great news because they used to be a headache to work with. I also didn't know about the useContext so thank u a lot for sharing this!!

Collapse
 
anishamalde profile image
Anisha Malde

Hey Yuli! Thank you for your comment, so they are have not actually announced the deprecation of Class components, however they are definitely recommending to shift away from them.
No problem at all and thank you for reading!

Collapse
 
bytebodger profile image
Adam Nathaniel Davis

They're not getting rid of class components. This article references the fact that they've stopped using class components in their code samples.

Collapse
 
lexiebkm profile image
Alexander B.K.

I have only read several topics in the new doc. I like the organization of topics covered and the explanation. The explanation on Effects, including why and how to add dependencies in useEffect is clear; this is not clearly explained in the legacy doc. However, I still need to visit the legacy doc to find the equivalent topics of particular things in the new doc, such as Render Props, Code-Splitting,

Collapse
 
anishamalde profile image
Anisha Malde • Edited

Hey Alexander! Thank you for sharing your thoughts. Thats very interesting that you feel like you have to visit the legacy docs! I don't know if you have seen the section on Lazy loading in the new docs, but it does cover some of the aspects of code splitting. As for Render Props a lot of developers have been replacing them with custom hooks for many of the use cases, but i'm very interested to hear your thoughts on this 😊

Collapse
 
duendeintemporal profile image
duendeintemporal

Pienso que ciertamente llena un vacio presente en la documentación anterior. Por otra parte resulta muy util como mencionas los ejemplos citados en diversos casos, pues son una guía y referencia directa que facilita no solo la comprensión de los mismos, sino también permite una consulta rapida para alguna duda sin tener que recurrir a documentación externa...

Me pareció muy util tuarticulo, además sabía de que exitía una nueva documentación lo que no estaba muy claro era como llegar a ella, pues requería muchos hipervinculos de por medio desde la documentación vieja.

Gracias por el aporte.

Collapse
 
corrinareilly41055 profile image
Corrina Reilly

Great post! I totally agree that the new React docs are a huge improvement over the old ones, especially when it comes to teaching modern React and promoting best practices like functional components and hooks.

I particularly appreciate the emphasis on migrating away from class components and towards functional components, as well as the recommendation to use destructuring to pass props. These changes not only make code more readable and easier to test, but also help to reduce the cognitive load for new developers who are learning React for the first time.

The dedicated section on hooks is also a big win, as it helps to promote code reuse, modularization, and better separation of logic. And I completely agree with your point about the importance of properly handling the useEffect hook, which can be a bit tricky to get right.

All in all, I think the new React docs are a fantastic resource for anyone looking to learn or improve their skills with this powerful framework. Keep up the great work!

Collapse
 
anishamalde profile image
Anisha Malde

Thank you so much for sharing your thoughts, glad to see you agree with some of the points!

Collapse
 
jrhodes95 profile image
Jack Rhodes

Agreed - I was pretty shocked when I came back to the React docs earlier this year after working in Elixir for 18 months and found that all the examples were still Class component based! 🤯

Collapse
 
anishamalde profile image
Anisha Malde

I know right! It must have been so confusing for new developers 🤨

Collapse
 
mattbarnicle profile image
Matt Barnicle

Good article. Agreed that the docs were in need of updating and I'm glad to see they did that. And I didn't know about useReducer before reading this, so thanks for enlightening me!

Collapse
 
bybydev profile image
byby

As a React developer myself, it's always great to see the framework's documentation getting even better and more accessible.

Collapse
 
pazapp profile image
PaZapp

Happy to learn the basics of React. hoping will be good soon by learning it from her.

Collapse
 
jonny133 profile image
Jonny Lee

Glad that the new docs are out of beta! It is nice to see emphasis on functional components and a number of useful examples

Collapse
 
priya_patel_6773e453d32b2 profile image
Priya Patel

This is so interesting! I really struggled picking up hooks when I started and now it makes a lot more sense as to why. Thank you for sharing your insight.

Collapse
 
ortonomy profile image
🅖🅡🅔🅖🅞🅡🅨 🅞🅡🅣🅞🅝

Are you just parroting complaints about class components from elsewhere? There’s no ‘overhead’ to a JS class - it’s just syntactic sugar on a function.

Moreover, lifecycle methods were arguably easier to understand than hooks…

Not that I advocate class components - it’s more boilerplate and maintaining state is annoying, but let’s make sure we’re even handed in a critique.

The new docs are great, but in my experience, the biggest pitfalls of react and hooks are changing dependencies - functions or value props which must be made stable with useMemo or useCallback in parent rendering the component - this is the biggest cause of bugs and side effects IMHO. Do new docs address this?

Finally - destructuring is super useful - especially in typescript - where each prop can be properly typed and default values assigned to optional parameters and all essentially ‘documented’ in the function definition itself. Very nice.