Learn how to optimise your React app performance by using the useMemo() and useCallback() hooks correctly and also learn when to use the React.memo function.
Did you know that React offers a function called React.memo to optimise performance? And also, did you know that React offers hooks called useCallback() and useMemo() which again can optimise the app performance?. Are you confused about when to use which technique? I will explain the most common use-cases of these techniques with a simple example so that you can learn and ship highly performant react applications in the future.
React.memo is a Higher Order Component. You can wrap your component with React.memo(<Component />) for a performance boost by memoising the result of the component. …
A step-by-step guide to deploy your create-react-app to GitHub Pages using GitHub Actions
I hope you are trying everything you can to stay safe and healthy in this global pandemic. I wish you a good day.
The first thing we need is a React application of course. We will use
create-react-app to build one.
Create React App is a comfortable environment for learning React and is the best way to start building a new single-page application to React.
To save you some time, I have published a
create-react-app repository on GitHub. It has
routing and a basic
component setup already.
Note: Make sure you wrap the top-level component with
HashRouter instead of the normal
Excited already? let’s get started.
We will start with a very simple state machine called
toggleStateMachine machine which will toggle between two states
Here's a cool visualizer for the state machine and how it transitions from one state to another. Link to XState Visualizer.
Once you’re in the visualizer page, empty the
definitions tab because we are going to build it from scratch. …