Skip to content
loading...

🔥 Learn React in 10 Tweets (with hooks)

Chris Achard on September 20, 2019

This was originally posted as a twitter thread: https://twitter.com/chrisachard/status/1175022111758442497 🔥 Learn React in 10 tweets (with hooks)... [Read Full]
markdown guide
 

I haven't used React in the last three years but these steps were quite clear and helped me understand how it has evolved. Thanks :)

 

I see only one change of modern React compared to React 3 years ago: hooks instead of class components with local state and lifecycle methods. I guess in the next three years React will not change dramatically as well.

 

I agree.

Also - classes still work great, and there are no plans to deprecate them! I only choose hooks for this guide because I find them easier to explain than classes. I hope to do another guide in the future though (a part 2 I guess) that explains classes - because there are SO MANY classes in the wild that React developers will definitely encounter them.

Btw, I still prefer to use class components instead of hooks, because I don't want to mix two approaches in one codebase (even if it's the acceptable strategy as described in the official docs).

I see increasingly hooks described as an alternative to classes. But hooks are really just something you can use in functional components. Functional components are the alternative to classes and don't require hooks

Correct, yes. Hooks are what enables function components to replace classes though- otherwise you can have local state. You could do everything in redux though say, and you wouldn’t need ‘useState’

Hooks help functions replace classes only when those class components used state or life cycle. Otherwise it could have used a functional component all along and that's always been the alternative to classes. I'm not sure what my point was anymore but it's fun to discuss

:) Yes - you're correct; the main use case for hooks is state or lifecycle (useEffect). You can also use useRef for reference though, useContext for context, and a few other things - but useState is probably most of the usage.

 

I don't think you can update state as you do in 7. If you set state derived from the current state, you should pass in a function which takes the previous state as parameter and returns the new state:

setCount(prevCount => prevCount + 1)
 

That's important if you're doing multiple setCount calls or async ones, yes absolutely. With just the one, it's fine to use the previous value.

But yes! That's a good point for the next course :) Thanks

 

Hey Chris in order to keep your teachings high quality I would strongly suggest for you to change the number 7.
Clicking thrice fast enough in the button can already cause an inconsistency between clicks and count value.
I have to remember people all the time that setState is an async action, and we often find flaky tests because of patterns like the one you're using, so, please, for the sake of newcomers doing the right thing. Change it to use the callback syntax.

I'll have to test that, yeah - I often forget about the callback syntax myself :/ so it would be good for me to remember too! Thanks for the tip

 

If you don't believe you can learn React in a few Tweets, just remember that we have a president who runs the huge country with Twitter.

 

🤣 - My goal is to get people "over the first hurdle" - and really, the core of React isn't that big!

There is obviously more you need to know to write a full app, but I tried to fit in the base of what I use everyday. Hope it helps!

 

This post is amazing. I've been learning react this week, I am feel so comfortable creating a simple UI, I already added authentication using okta, and make http request to an API that I build about 2 months ago (mongo, node, express).

I have to say I prefer classes instead of hooks. Idk it seems more complicated I know that things become easier when we try. But for now I will keep using classes if I need to work with state. (BTW in this post finally I understand how to work with hooks ) thanks (y)

 

That's awesome! Glad it helped

Yeah - classes are totally fine! Both classes and hooks are fully supported - so if you like classes better, then go for it :)

 

It is awesome how short and definite it is. Good job!

It has made me think about creating it for Vue and Angular 🚀

 
 
 

I had a couple of lightbulb moments reading this article. Thank you so much!

code of conduct - report abuse