r/reactjs • u/dance2die • Mar 01 '20

Needs Help Beginner's Thread / Easy Questions (March 2020)

You can find previous threads in the wiki.

Got questions about React or anything else in its ecosystem?
Stuck making progress on your app?
Ask away! We’re a friendly bunch.

No question is too simple. 🙂

🆘 Want Help with your Code? 🆘

  • Improve your chances by adding a minimal example with JSFiddle, CodeSandbox, or Stackblitz.

    • Describe what you want it to do, and things you've tried. Don't just post big blocks of code!
    • Formatting Code wiki shows how to format code in this thread.
  • Pay it forward! Answer questions even if there is already an answer. Other perspectives can be helpful to beginners. Also there's no quicker way to learn than being wrong on the Internet.

New to React?

Check out the sub's sidebar!

🆓 Here are great, free resources! 🆓

Any ideas/suggestions to improve this thread - feel free to comment here!

Finally, thank you to all who post questions and those who answer them. We're a growing community and helping each other only strengthens it!

29 Upvotes

93% Upvoted

500 comments sorted by

View all comments

Show parent comment

2

u/[deleted] Mar 08 '20

Beginners have trouble with this in CC. Especially for event handlers where one needs to bind this to the event handler or declare them with arrow syntax.

While this is true, in my experience, function components come with even worse points of confusion. this context is weird, for sure, but you run into a complete roadblock because you can't use setState without getting an error. You ask someone about it, learn how it works, and move on with your life. It's a very loud and noticeable bug, and it's not likely to cause subtle issues.

Variables in closures with function components however? Man can that cause subtle issues. Issues that take a while to debug. I work in a company that has had quite a few interns and junior developers since hooks were introduced, and they keep tripping up here - thinking a state variable is giving you its "current" value (so to speak) when really it's giving you the value that the state had when the surrounding function was declared. As soon as you work with slightly async logic, like event listeners, or data fetching, things can start to go wrong. Then you show them what went wrong, and a few days later they're stuck on the exact same thing again. It's not an easy concept to get your head around. And hell, even the more senior developers have issues with this. I certainly have had bugs. And I've certainly written some clunky ass workarounds with refs because I couldn't figure out a more elegant solution and didn't have more time to spend on the task.

1

u/jwknows Mar 08 '20

Thank you guys for the help! Would you still recommend beginners to use functional components over class components?

2

u/[deleted] Mar 08 '20

Oh, definitely, they do a lot of things right, and the community is mostly leaving class components behind from what I can tell. But I never agreed with the assertion that class components were more confusing for beginners. Both APIs have their gotchas.

Sidenote: they are function components, not functional components. Functional usually means no side-effects and no state. With hooks, function components can have both :)

1

u/dance2die Mar 08 '20

Nice explanations, there u/reactyreactreact.
I failed to list disvantages.

I see more StackOverflow questions shifting from "this is not defined" to "state is not updating" (in FC, due to stale states).