DEV Community

Cover image for React 18 - New Features & Improvement Strategies

React 18 - New Features & Improvement Strategies

Bidisha Das on April 17, 2022

On March 8th, the React team released the React 18 RC(Release Candidate). The latest release has brought a number of new features that would transf...
Collapse
 
tsgoswami profile image
Trishnangshu Goswami

Going through React docs and understanding new features gives little discomfort, instead this blog explains things each and every details with a very suitable example which anyone can easily understand with quick read. Amazing. Great job 👍🏻👍🏻.
Keep posting such blogs… Will collaborate someday.

Collapse
 
officialbidisha profile image
Bidisha Das

Thank you so much. You're the inspiration! :)

Collapse
 
rickdelpo1 profile image
Rick Delpo • Edited

Hi there React Devs, I am a beginner and struggled with React last year for about one month and then I switched to Plain JS because React seemed over my head. I wrote a dev article here at dev.to/rickdelpo1/react-vs-plain-j... outlining 17 reasons why I switched back to Plain JS. Am I being too shorted sighted? Am I missing something about the value of React?

Collapse
 
officialbidisha profile image
Bidisha Das

See , what I feel is maybe you need to go through better courses or maybe educative.io Or frontendmasters. They are really good to follow and will guide you through.

You can only be great in React is you are really really good in JavaScript.

Collapse
 
rickdelpo1 profile image
Rick Delpo

ok thanks, now I see the problem is that I am not that great with JS because I am mostly a backend developer. So perhaps Plain JS is more my speed. But I still have a hankering for React so will search for easier tutorials on the topic.

Thread Thread
 
johnyepthomi profile image
JohnYepthomi • Edited

I feel the more familiar you get with JavaScript , it will make learning React easier for you. I taught myself web development on my own for the most part and I can say that I found react to be easy to understand as I had a better understanding of JS and also that I read through React Documentation and learn about details of component lifecycles etc and the rest follows.

The faster you familiarise yourself with reading Documentations , you will save yourself a lot of time and will improve your understanding of the library etc. I've adopted this habit and It's very very helpful.

Keep your JS fundamental strong and keep building on them gradually, Read MDN Documentation beyond just looking something up.

Embrace the ASYNCHRONOUS nature of JS.

You can do it.

Thread Thread
 
officialbidisha profile image
Bidisha Das

Can't agree more.

Thread Thread
 
rickdelpo1 profile image
Rick Delpo

Hey thanks John for ur response. I do agree that I can do it but now comes all the mega time to put in and the learning curve involved. Also I am a bit concerned about all the JS in React impacting my SEO.

Thread Thread
 
johnyepthomi profile image
JohnYepthomi

That's a business decision and ofcourse there's SSR but my point was about learning something new.

Collapse
 
peacechen profile image
Peace Chen

Plain JS is ok for simple apps, but you'll find yourself buried in a sea of spaghetti code as that app becomes more complex. React and other libraries exist because real-world production apps contain a lot of code that needs good structure and design patterns.

Collapse
 
rickdelpo1 profile image
Rick Delpo

Can't wait for the spaghetti !! Am not totally giving up on React.
Perhaps this is when I will appreciate React much more.
Thanks for the heads up.
PS: my post is not meant to be a negative rant

Collapse
 
ryannerd profile image
Ryan Jentzsch

Depending on your use case React (or any framework) can be overkill. I've been developing software for over 25 years and it took me some time to wrap my head around React. I developed mainly using OOP languages such as C#. React favors composition over inheritance and this was very frustrating at first. Keep at it. Eventually you'll get that "ah ha" moment and things will start falling into place.

Collapse
 
rickdelpo1 profile image
Rick Delpo

Thanks Ryan, then I'm not the only one struggling with React. Good to know. For me it is a real shock coming from 20 years of backend SQL development onto the frontend scene.

Collapse
 
olamphzy profile image
Olamphzy

I'm also new to React. Would love to learn

Collapse
 
adelpro profile image
adelpro

Thinks for you article, nice explanation.
I will add to that the use of and lazy loading.
Its a good combination to use its with useTransition hook to show a seamless user experience.

  • Show animation when the component is loading with "Suspense"
  • Show amination when data is fetching with useTransition.
Collapse
 
officialbidisha profile image
Bidisha Das

Thank you so much. I have noted these points.

Collapse
 
anshuman_bhardwaj profile image
Anshuman Bhardwaj

well explained @officialbidisha

Collapse
 
officialbidisha profile image
Bidisha Das

Thank you so much.

Collapse
 
diballesteros profile image
Diego (Relatable Code)

Great write-up. Really excited to see what the future of React is with this update. Probably a ton of interesting new things that can be done by major third-party libraries.

Collapse
 
officialbidisha profile image
Bidisha Das

So am I guessing - the new hooks for third party library integration surely will play a huge role in this. Thanks a ton! 😊

Collapse
 
nikhilroy2 profile image
Nikhil Chandra Roy

you should make your portfolio responsive, I have gone through your portfolio site, but it's okay, keep up it. Thanks

Collapse
 
officialbidisha profile image
Bidisha Das

Thank you so much! Sure Nikhil. I will surely work on it.

Collapse
 
andrew_march_b968a4edb028 profile image
Andrew March

Looks like a lil typo in the useSyncExternalStore snippet

Collapse
 
andrew_march_b968a4edb028 profile image
Andrew March

Or how would
const state = useSyncExternalStore(subscribe, getSnapshot[, getServerSnapshot]);
work?

Collapse
 
jacksonkasi profile image
Jackson Kasi

really thank for share with us :D

Collapse
 
fayismahmood profile image
fayismahmood

👍👍👍👍👍🔥🔥

Collapse
 
arzivre profile image
Arzivre

the animation so good

Collapse
 
officialbidisha profile image
Bidisha Das

Thank you! 😊

Collapse
 
0vortex profile image
TED Vortex (Teodor Eugen Duțulescu)

n1!

Collapse
 
officialbidisha profile image
Bidisha Das

Thank you!

Collapse
 
andresausecha profile image
Andres Ausecha Mosquera

Nice article. I love when writers take time to add some real life example, not just Copy/paste the docu theory that is sometimes boring.

Collapse
 
officialbidisha profile image
Bidisha Das

Thank you so much.

Collapse
 
changtimwu profile image
Tim Wu

Is there a project hosted on codesandbox/codepen demostrating all these new features?

Collapse
 
officialbidisha profile image
Bidisha Das

Nothing as of now. Let me see if I can replicate it.

Collapse
 
picwellwisher12pk profile image
Amir Hameed

I needed one such article. thanks

Collapse
 
r11 profile image
Peter Jaffray

Some of this reminds me of the really old "ripscript" from the BBS days in the 90's.

Collapse
 
vareksun profile image
Varek

Thanks for sharing

Collapse
 
wevertoum profile image
Weverton Rodrigues

amazing!!!

Collapse
 
officialbidisha profile image
Bidisha Das

Thank you.

Collapse
 
kumarkalyan profile image
Kumar Kalyan

Amazing Content. Beginner Friendly and to the point !

Collapse
 
officialbidisha profile image
Bidisha Das

Thank you, Kumar. 😊

Collapse
 
chasm profile image
Charles F. Munat

Sorry, but it's all bullshit. I downloaded the app and went to open it. WTF? I have to sign up to use it? Why? So they can track me, invade my privacy, sell my data?

No serious FOSS app requires you to give away your data to use it. That's not "free" at all -- it's the worst kind of price.

Am I missing something? Is there a way to use it without signing up?

Collapse
 
pavindulakshan profile image
Pavindu Lakshan

Is there any update in React 18 to support writing error boundaries as functional components? It's a pain to still write error boundaries as class components.

Collapse
 
officialbidisha profile image
Bidisha Das

Nothing that I came across. For now I use a combination of both.