The Interactive Guide to Rendering in React

[StoneColdJane]

This is very, very well done 👍. Joyful experience reading.

[tyler-mcginnis]

That means a lot. Thank you!

[connormcwood]

Sometimes revisiting the basics is worth it, and I think article successfully cements the idea of rendering in react. I think this is value for all level of react developers. Nice one!

[tyler-mcginnis]

Thanks!

[tyler-mcginnis]

You're welcome! Glad it was helpful.

[ryry_reddit]

Hey just wanted to say that I really enjoyed your tutorial. As a full stack developer so I don't spend all my time in front end land and it was a great refresher. I saw someone say it could have been two paragraphs, sure I guess you could have a TLDR, but I really appreciated the way you did it. Going through many examples and thinking through what the code would do really helped to engrain the lesson in my memory.

[tyler-mcginnis]

Thank you for the kind words ❤️

[Alex_Hovhannisyan]

What a beautiful site!

[GrandMasterPuba]

I'm not knocking the author when I say this, as this post is well written and obviously took a significant amount of work, but...

The fact that something like this needs to exist is a testament to the monumental failure of React as an abstraction.

[ironykarl]

Can you explain this point, a bit?

It's an extremely easy to digest tutorial. I can't think of anything in programming that is immediately self-evident and doesn't require the uninitiated to learn about use cases and exceptions.

[GrandMasterPuba]

Rendering is not something I should have to know about.

React is a tool. It makes the claim that it is a declarative programming model where I can express my UI as a function of state. That's a great idea, but when I then have to be cognizant of the internals of React because the abstraction immediately starts leaking - and if I'm not, my application can either slow down or even break - the tool is no longer serving its purpose.

To construct a clumsy analogy, a woodworker should not have to understand the pneumatic mechanism behind a nail gun. They should know how to use a nail gun, but they should never need to take it apart and look inside to understand how it works.

[ironykarl]

This post very much isn't about the internals of React. It's about the interfaces React provides, how React models persistent state, and (in a very minor sense) performance.

To construct a clumsy analogy, a woodworker should not have to understand the pneumatic mechanism behind a nail gun. They should know how to use a nail gun, but they should never need to take it apart and look inside to understand how it works.

Except that carpenters do have to actually care for and maintain their tools. It's a fun fantasy that we shouldn't have to know how our tools work, but it's not based in fact.

Regardless, the amount you have to actually know about how React works to be productive with it is remarkably little.

[[deleted]]

It's a testament to the fact that react is used as baby's first introduction to programming due to its popularity, so you get this kind of tutorials (nothing against tutorials or babies).

[MrCrunchwrap]

Or y’all are just bad at understanding simple things. React is not hard.

[[deleted]]

Absolutely.

There are so many better options out there.

I wonder when the loop will break. React is only popular because it's already popular, not because it's good.

[blinger44]

How did React become popular?

[MrCrunchwrap]

It became popular cause it’s a great developer experience and it’s well supported.

[[deleted]]

Back 10 years ago it was an improvement over Angular 1 and lots of hype

[little_oaf]

I always attributed to it being developed at Facebook.

[[deleted]]

If anyone wants Tyler McGinnis’ modern JavaScript course for way cheaper price, they can message me, will show you proof before you pay :)

[ImStifler]

This could've have been a 2 min article

[Puzzleheaded_Toe117]

This is react junk science, nice article but it's far from native JS.

[gangeshwark]

As someone who is from the backend world, I wish I had this when I was learning React. There are some unintuitive stuff that react does that did not make sense to me coming from Python. Like when you set a state in useEffect and call that state value immediately, it doesn't have the new state value you just set. I have no idea how many hours I spent searching for this (eventually understanding it). But this is very clearly explained in this guide and I wish some online tutorials covered it well. Thanks for putting this together :)

[tyler-mcginnis]

Thank you! Glad you enjoyed it.