Without using: React.memo, useMemo, PureComponent, or shouldComponentUpdate

In this post, I want to share two alternative solutions to the list of approaches above. Before you reach for one of the methods above you should consider the two solutions below.

Slow Components

Imagine we have a component that takes a long time to render. For this example, we’ll refer to <SlowComponentTree /> as our slow component.

import { useState } from 'react';

export default function App() {
let [color, setColor] = useState('red');
return (
<div>
<input
value={color}…


There are three easy ways to hide an element using CSS; each of them a little different than the other.

  • display: none; — display specifies how an element will be displayed. When you set the property to none the element will not be displayed.
  • visibility: hidden; — visibility specifies whether or not an element should be visible. When you set the property to hidden the element is still displayed, it’s just hidden from view (invisible).
  • opacity: 0; — opacity specifies the degree to which content behind the element is hidden. When you set the property to 0 the element is…

Today we’re going to look at the css position property and learn the difference between: static, relative, absolute, fixed, and sticky positioning.

Terminology

First, let’s familiarize ourselves with some words and concepts used in this article.

  • Taken out of the normal flow — If an element is taken out of the normal flow of the document, then no space is created for the element in the page layout, and other elements will position themselves as if the element did not exist.
  • Positioned element — A positioned element. For example, a positioned ancestor is an element whose position value is anything except…


Preface

Exploring the intricacies of how: Babel, Webpack, or Hot Module Replacement work is out of scope for this article. I would recommend reading documentation available online if you are interested in learning more about how these tools work. Here are some links to get you started:

1 Getting Started

Let’s start by creating our folder structure and some files for our project. You can leave the files empty for now, we’ll update the content of the files throughout this article.

.
+-- react-app
+-- public
| +-- index.html
+-- src
| +-- App.css
|…

Muggle-born

Hi, my name is Jeremiah. I build things on the web for fun. I enjoy figuring how and why things work the way they do, and I try teaching others along the way.

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