The first video I wanted to review, was a short and sweet summary of what react is.
I chose this video because I enjoy Mosh’s content and find them very insightful and definitely suggest watching some of them.
The video was about 4 minutes and although this may not seem like a lot of time for a video explaining React, it had a lot of information. He starts off by very simply explaining what React is, it’s history and why it is important to learn. He then talks about the key ideas behind react, shows an example and draws out a mini framework for the example. He lastly gives a brief explanation at the end about the difference between React and Angular.
I found this video informative, clear and easy to follow along. If you are just starting out with react this is a good video to watch. However, more advance aspects of React like lifecycles have not been covered. But it is a 4-minute video so of course, it won’t be too detailed.
I did not learn much from this video as I know the basics of React but it was having a simplified explanation. I also have not learnt much about Angular yet so it was nice to learn the difference between the two.
The second video I wanted to watch was one that talked about why people should not use React. I wanted to watch a video like this to understand some of the downfalls of React to get an unbiased opinion on React.
This video was not really what I was expecting but I stuck to it and finished the video. The key takeaway was that React’s architecture was not built with an end goal in mind and thus they keep on running into issues. This means that they often release new versions that fix these issues like React Hooks and developers now have to re-write previous code to accommodate these new features.
The video was 16 minutes and in my opinion, could have been a lot shorter but Chris Hawkes talked about the history of React and the React’s changes over the years to solidify the key point.
This was a really fun video. It looked at a piece of code and the video was about refactoring the code. I learnt some cool tricks like this:
which means you can utilise ES6’s object literal property value shorthand when you are updating a state, which makes your code look a lot cleaner.
This is very fun and an easy to watch a video which I highly recommend it
The next video is on optimization
- Use functional component when no internal state, this makes it easier because there is less code, it’s stateless, simpler to test and not ‘this’ binding
- Use small components, it’s easier to read, debug, manipulate and reuse throughout the program
- Know how to use ‘this’:
This is bad for performance as a new function is called every time the page renders
But this also has bad performance because the arrow function is in the render
this solves the performance issue but super must be called first
This is readable and solves the issue of performance with the first two methods
4. Use this.setState as a function and not an object:
The reason for this is if you call this.state straight afterwards and are calling this.setState with an object, you do not know if the state has been updated.
5. Use prop-types:
Prop-types helps with debugging and allows a developer to ensure the props is getting assigned the right type of data.
6. Use the React developer tool:
Using the React dev tool makes it easy to debug, analyse the performance and a lot more.
Overall I really enjoyed this video. I think it was easy to understand but I also learnt a lot from it.
The key takeaways from the video were:
- Don’t overload the DOM
- Every component should be pure
- Every prop should have reference equality
The first step to optimization is to use the React dev tools and record the performance.
This allows you to see how long it takes components to render. As you can see from the above picture BotSpec takes 3x longer to render than BotPage which shows something it is not optimized.
Some potential problems:
You have too much data in a list:
This causes a problem because every time your page renders it reloads all your data which can be problematic.
One solution is pagination however this by its self is often not good user experience.
You can do this by using virtualization. This is when only the content that the user can see is being rendered. This could be a very good solution but for websites like Amazon that has millions of data, you are going to want to combine this with pagination. So you load 100 results at a time before you go on the next page and load the following 100 results but you also only render the 10 results that the user can see of those 100 results at a time.
This is a big problem with react but has an easy fix a lot of the time.
Use pure components. By doing this it will only render the component when the prop value has changed. The problem with this is that you need to be very careful about what you pass into your component as a prop, as pure components are strict in what it accepts.
I learnt a lot from this video and I definitely am going to start looking into React optimisation more in the future as it is a very important and interesting topic.
Overall I really enjoyed these videos and I think that it really helped me think about coding differently.