Introduction to React

A brief review of the Quick Start, Introduction, and Tic-tac-toe sections on the react.dev website and a critique of the useEffect hook.

---

By George Tsakoumakis

23 June 2023

First of all, I would like to start with the fact that I am very excited to start posting on this blog and I cannot wait for others to start posting their own thoughts too. But without any further ado, let's get started.

So I recently had the honor of making a web app using React that displays different quotes retrieved from an API. And I have to say, the highlight of this experience was dealing with asynchronous retrieval of data while using the useEffect hook, which was a complete nightmare. Also, initially, I had the brilliant idea of using jQuery to manage some animations, which let's just say React did not love. Conclusion: React with jQuery is a big no-no, you don't want to tamper with state like that.

First, I would like to point out the following irony: The "Quick Start", "Introduction" and Tic-tac-toe game were some of the simplest and cleanest pages of documentation I have ever read in my life. Truly marvelous, hats off to whoever wrote them. But go to the Reference page, and all hell breaks loose. The useEffect hook documentation gave me such a headache while trying to understand what it did. By the time I got to the documentation, my brain had already been fried from trying different approaches, so simply imagine a teenager at 2 am having spent the better part of the last 12 hours coding and then trying to read mind-boggling documentation - perfect recipe for disaster.

Anyway, I think I got the hang of it, however, I still don't know how to use it with asynchronous functions. Now, if I understand useEffect correctly, and do correct me in the comments if you believe I am mistaken, useEffects is loaded on every update as soon as the component is rendered, so something like the legacy componentDidMount method. It takes two arguments, the first one being a callback method that should be performed on render, and an array containing variables it should monitor for change in order to render again and call the callback. Or at least that's what I understood from a friendly guy on Stack Overflow who had the courtesy to explain it to another poor soul.

Side note, I am sorry to all the people who are proficient with using all these technologies that I am ranting about. You are probably reading through this and thinking I am either an idiot or too lazy. Well, hopefully not, but that's what the blokes on Stack Overflow tend to think. In React, like with any other technology, there is a learning curve, and in the past few days I believe I have learned a fair amount of things on React to believe I have passed that starting "climb" to the point where I can confidently create components and give them my desired functionality. Deciding where to put state is still a bit of a struggle, but I am getting the idea. I might soon make another post about my struggles with modifying CSS using state and other techniques such as JSX ternary operators, but for now, let's stick to an introduction to React. Just giving you a little something to look after...

To conclude, I don't believe I will have to deal with async functions for a while, but I will certainly read more on the topic as soon as I have some free time from applying to internships and doing all sorts of training for uni jobs. In the meantime, I will keep playing around with React and other things that you guys want me to explore and I will keep making posts about them.