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.

Image for post
Image for post
Unsplash

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

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

Image for post
Image for post

I hope you are trying everything you can to stay safe and healthy in this global pandemic. I wish you a good day.

Spin up a react application

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 BrowserRouter.


Image for post
Image for post

My goal for the day is to get you started with XState library. XState will help us build finite state machines. First, we will build a state machine and then integrate it into a react app.

Excited already? let’s get started.

We will start with a very simple state machine called toggleStateMachine machine which will toggle between two states active and inactive.
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. …

About

Ajin Kabeer

Full Stack Engineer ⚡ (Modern JavaScript, TypeScript, Go), PWA adept.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store