5 React Performance Tips

React is popular because React applications scale well and are fun to work with. Once your app scales, you might consider optimizing your app. Going from 2500ms wait time to 1500ms can have huge impacts on your UX and conversion rates.

So without further ado, here are some performance tips I use with React.


React.memo

If you have a stateless component and you know your component won’t be needing re-render, wrap your entire stateless component inside a React.memo function.

Becomes the following;

Let’s build a fast, slick and customizable rich text editor with Slate.js and React — Part II

What we will end up by the end of this article

This is a fun series about building a rich text editor with React and Slate. Here’s part one where we left off. You’ll want to read it first if you haven’t already!


Full speed ahead

The editor has to look sharp. Who wants to stare at and use a scruffy editor? So why don’t we add some quick CSS to make it look more spectacular.

In a traditional create-react-app, we have the index.css file inside the src folder. index.css is used for applying “global” styles for our app. By global styles I’m keeping in mind DOM elements which apply to all pages/documents. For example body and html.

Let’s build a fast, slick and customizable rich text editor with Slate.js and React

What is a rich text editor anyway?

A rich text editor’s aim is to reduce the effort for users trying to express their formatting as valid HTML markup. A rich text editor enables the users the option to format their text.

Everyone has used a rich text editor at some point. So why not build one? Here are some of the most used rich text editor examples.

👆 Pointer events with React — The why, how, and what?

Back in the good old days we only had a mouse and listening for events was simple. The web content assumed the user’s pointing device will be a mouse.

Nowadays we have many devices which don’t correlate to having a mouse, like phones with touch surface or pens.

How can we listen for events if the user doesn’t have a mouse?

Touch events to the rescue!

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×