DEV Community: Tushar Kashyap

[Discussion] What's the new big thing in web dev in the past 2 years?

Tushar Kashyap — Fri, 10 Nov 2023 20:18:57 +0000

So I cleared my job interview back in mid-2021 and started in a product management role post that. Unluckily, our team here is not the one implementing code, and I am missing the craft of programming.

Recently, however, I'm trying to get back into making projects for myself and maybe for the public in future. Therefore, I'm eager to know what all have I missed.

💻 In your opinion, what stands out as the most impactful update/ product/ advancement/ trend in web development in the past 2 years?

Try using reducers for state management.

Tushar Kashyap — Sat, 16 Jan 2021 17:22:37 +0000

Ever heard about reducers before?

Well of course bud, what're you talking about? I'm head over heels in love with reducers. I use reducers everywhere, even in the simplest counter app.

Well, great! This article isn't for you 😊.

If you've heard about reducers and are trying to procrastinate from the moment you heard about reducers because you don't feel the need to learn about this overly complex, intricate, tortuous, and difficult-sounding thing and stick useState everywhere you want to manage state, you're at luck 🍀.

Reducers are a pretty fun way of managing state (as I feel) with a variety of benefits as we shall see throughout the article.

So what is a Reducer?

Well, it's just a function. Nothing fancy. It takes in the parameters and spits out a return value. As every normal function does.

Let us look at the params and the return value, shall we?

So every reducer function takes in the initial state of the application and the action which is like saying "Here's the thing that happened." and throws out the new state of the application after the action has occurred.

Now after making this reducer function you'll just have to dispatch actions to bring changes to the state. That's pretty much what is the reducer pattern.

Time to build!

OKAY! Let's make a div and change its CSS properties using a reducer. What I like to do is making the reducer in isolation, thinking of what actions I would like to perform.

const INCREASE_WIDTH = "INCREASE_WIDTH";
const TOGGLE_FILL = "TOGGLE_FILL";

const cssReducer = (state, action) => {
  if (action.type === INCREASE_WIDTH) {
    return { ...state, width: state.width + 5 };
  }

  if (action.type === TOGGLE_FILL) {
    return {
      ...state,
      backgroundColor: state.backgroundColor === "white" ? "plum" : "white"
    };
  }

  return state;
};

So here I would like to increase the width of my box and also toggle the background color, as you can see I have defined two actions types on top INCREASE_WIDTH and TOGGLE_FILL which are just strings and are there to prevent typos as an error message will pop up as soon as you mess up the name of the constant whereas none would've popped if you were using strings everywhere and misspelled one. Also, they help in autocompleting stuff so just do it 👍🏻.

The reducer function is taking in the initial state and as per the type of action, it changes the state accordingly and returns it which will update the view.

You see the benefit? As it is just a function it is utterly easy to test, just provide it with the initial state object and an action object and it will be throwing out a predictable final state object. Smooth 🧈.

P.S. It's okay if you're a little confused as you've just seen a reducer function and this will make sense when we implement it fully in our application, that's up next.

The useReducer hook!

useReducer is one of the prebuilt React hooks, which let us implement reducer patterns quite easily without reaching out for external libraries like Redux.

It is missing some features that Redux has (applying middleware for example) out of the box, so it depends if you need those in your application. Most of the time you don't, but this is a choice you've got to make.

Here's how to use it

const [styles, dispatch] = useReducer(cssReducer, initialStyles);

useReducer takes in the reducer and the initial state as its arguments and returns an array of two things, first one is the state of the application at any given time and the second is the dispatch function used to dispatch actions.

Let us write all the code together so you can see dispatch functions in action.

import React, { useReducer } from "react";

const INCREASE_WIDTH = "INCREASE_WIDTH";
const TOGGLE_FILL = "TOGGLE_FILL";

const initialStyles = {
  border: "3px solid plum",
  height: 100,
  width: 100,
  backgroundColor: "white"
};

const cssReducer = (state, action) => {
  if (action.type === INCREASE_WIDTH) {
    return { ...state, width: state.width + action.payload.step };
  }

  if (action.type === TOGGLE_FILL) {
    return {
      ...state,
      backgroundColor: state.backgroundColor === "white" ? "plum" : "white"
    };
  }

  return state;
};

export default function App() {
  const [styles, dispatch] = useReducer(cssReducer, initialStyles);

  return (
    <div className="App">
      <div style={styles}></div>
      <button
        onClick={() => {
          dispatch({
            type: INCREASE_WIDTH,
            payload: {
              step: 10,
            }
          });
        }}
      >
        Increase Width
      </button>
      <button
        onClick={() => {
          dispatch({
            type: TOGGLE_FILL
          });
        }}
      >
        Toggle Fill
      </button>
    </div>
  );
}

Here we are dispatching actions on click of the buttons. The action object should at least contain a type but we can also pass in more info about the action commonly in a key named payload, as we pass in the step here and we have changed our reducer function slightly to use that key.

Here is a live demo to play around with.

Another advantage we can see instantly is that it pulls out all the logic from the component itself which is now just rendering the HTML. You can put the reducer logic in another file (maybe even a file for all the actions) to make the code even more maintainable.

Reducers are really useful where there are a lot of moving parts, like in the case of a form with a lot of fields, instead of using a useState for every field try using a reducer instead.

You can also use a reducer to fetch from an external source and handle all the different stages of the request.

Here's a take on it.

import React, { useEffect, useReducer } from "react";

const REQUEST_LOADING = "REQUEST_LOADING";
const FETCH_SUCCESS = "FETCH_SUCCESS";
const FETCH_FAILURE = "FETCH_FAILURE";

const initialState = {
  loading: false,
  data: null,
  error: null
};

const fetchReducer = (state, action) => {
  if (action.type === REQUEST_LOADING) {
    return {
      date: null,
      loading: true,
      error: null
    };
  }

  if (action.type === FETCH_SUCCESS) {
    return {
      data: action.payload.response,
      loading: false,
      error: null
    };
  }

  if (action.type === FETCH_FAILURE) {
    return {
      data: null,
      error: action.payload.error,
      loading: false
    };
  }

  return state;
};

export default function App() {
  const [{ loading, data, error }, dispatch] = useReducer(
    fetchReducer,
    initialState
  );

  useEffect(() => {
    dispatch({ type: REQUEST_LOADING });

    fetch("some url")
      .then((res) => res.json())
      .then((response) => {
        console.log(response);
        dispatch({ type: FETCH_SUCCESS, payload: { response } });
      })
      .catch((err) => {
        dispatch({ type: FETCH_FAILURE, payload: { error: err } });
      });
  }, []);

  if (error) return <p>{error.message}</p>;

  return (
    <div className="App">
      {loading ? <p>Loading...</p> : <p>{data.setup}</p>}
    </div>
  );
}

Using reducers has certain benefits if used in the right places but don't stick them everywhere like the guy in the beginning. useState is perfectly fine for simple state management.

Using refs to check if a component is still mounted.

Tushar Kashyap — Thu, 15 Oct 2020 13:37:02 +0000

While reading Learning React by Alex Banks and Eve Porcello, I came across a very neat method to check if a component is still mounted or not.

This is useful because if you try to update the state of a component that is already unmounted you will get the following error.

To show you what I just said, let's start by making a simple React application which only has a single Card component and a button which mounts and unmounts that Card component.

Here is App.js

//App.js

import React, { useState } from "react";
import Card from "./Card";

export default function App() {
  const [showCard, setShowCard] = useState(true);

  const toggleCard = () => {
    setShowCard((prevState) => !prevState);
  };

  return (
    <>
      <button onClick={toggleCard}>Toggle Card</button>
      {showCard ? <Card /> : null}
    </>
  );
}

and Card.js

//Card.js

import React, { useState } from "react";

export default function Card() {
  const [creature, setCreature] = useState("Unicorn");

  const changeCreature = (e) => {
    e.persist();
    setTimeout(() => {
      setCreature(e.target.value);
    }, 3000);
  };

  return (
    <div className="card">
      <button onClick={changeCreature} value="Unicorn">
        Unicorn
      </button>
      <button onClick={changeCreature} value="Phoenix">
        Phoenix
      </button>
      <h1 className="card__heading">
        All about {creature === "Unicorn" ? "Unicorns" : "Phoenixes"}
      </h1>
      <p className="card__description">
        {creature === "Unicorn"
          ? "Often considered the most wondrous of all mythical creatures, the unicorn is also a symbol of magic, miracles, and enchantment. The magical and enchanting unicorn appears to only a rare few and has the ability to bestow magic, miracles and wisdom to those who are pure of heart and virtuous in their deeds."
          : "A phoenix is a mythological bird that cyclically regenerates or is otherwise born again. Associated with fire and the sun, a phoenix obtains new life by arising from the ashes of its predecessor."}
      </p>
    </div>
  );
}

The content inside the Card component changes according to the state variable creature which can be changed using the two buttons Unicorn and Phoenix.

In the App component we have a state variable showCard, through which we can mount and unmount the Card component.

Please visit the Live Demo to see what I am exactly talking about, ignore the commented out code.

The Problem

Imagine we are getting the data about Unicorns and Phoenixes from an external API and it does actually take some time to retrieve that data if people are on a slow connection.

Here, I am trying to mimic the same behavior through a state change in creature which takes 3 seconds as I'm using the setTimeout() function which works asynchronously, implying that you can interact with the app throughout the setTimeout() duration which is exactly how asynchronous calls to an API work.

Now due to the slow connection, people may have a window of opportunity to press the Toggle Card button (which will unmount the Card) after they press any one of the Unicorn or Phoenix button which takes up 3 seconds to update the state (try it yourself in the sandbox).

This will reproduce the error I showed at the very beginning, the error says we are trying to update the state of a component that is already unmounted from our application which is exactly what we are doing, trying to update the state of our Card component which isn't mounted anymore.

The Fix

💡 We will be using a ref to check if the component is still mounted or not before we update the state.

If it was a real API call what would happen is we would still make the API call as soon as the button (Unicorn or Phoenix) is clicked but just before we update the state with the data we fetched, we would use a ref inside a conditional to check if the component we are updating the state of still exists or if it unmounted.

Looking at the code will make things clearer.

//Card.js

import React, { useEffect, useRef, useState } from "react";

export default function Card() {
  const [creature, setCreature] = useState("Unicorn");

  const mounted = useRef(false);

  useEffect(() => {
    mounted.current = true;
    return () => (mounted.current = false);
  });

  const changeCreature = (e) => {
    e.persist();
    setTimeout(() => {
      if (mounted.current) {
        setCreature(e.target.value);
      }
    }, 3000);
  };

  return (...);   //same as before
}

As you can see here that the useEffect() we added runs after every re-render (as it has no dependencies) and sets mounted.current to be true every time. The actual magic ✨ happens in the cleanup function (the function we return) which runs only when the component unmounts and changes mounted.current to false.

In the function where I update the state I've included an if check to see if the component is still mounted before calling setCreature(), the instance when the Card component is not mounted to the screen mounted.current will equate to false and the state (i.e. creature) will never be updated preventing the memory leak error.

Go to the same Demo and uncomment the commented out code in Card.js to see for yourself.

Why use refs?

We use refs here because they're awesome 🔮. Yeah, that's the only reason.

Okay I am kidding.

P.S. It's so hard to add humor, ughhh 😩. I know you must be shaking your head at the moment.

So why did we use a ref here instead of something like a state variable `const [mounted, setMounted] = useState(false)`?

The answer is pretty simple, updating a ref never causes a re-render, whereas updating the state (i.e. using setMounted()) obviously does which will cause the useEffect() to run again and again causing an infinite loop.

Taking it a step further

I see that checking if a component in mounted or not can be used at quite a lot of places so that is an opportunity to extract all of the logic inside a custom hook.

//useMountedRef.js

import { useRef, useEffect } from 'react';

export default function useMountedRef() {
  const mounted = useRef(false);

  useEffect(() => {
    mounted.current = true;
    return () => (mounted.current = false);
  });

  return mounted;
}

Now it can be used anywhere as follows, const mounted = useMountedRef(); and checking with mounted.current before updating the state will prevent the memory leak error.

Remember: This is just a method of checking if a component is still mounted or not, the API request is still being made. So use it wisely if you can handle making that additional request.
Also, just use it anywhere where you feel the need for checking if a component is mounted.

Cover Illustration credits: Lukasz Adam

This is why you can't return adjacent JSX elements.

Tushar Kashyap — Sat, 05 Sep 2020 14:14:50 +0000

I've been using React for quite some time now and it's an amazing tool to write maintainable applications pretty fast. But I remember when I started learning it, I was shown my first error by the instructor

Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag

And he straightaway told that you can only return a single element from a component, if you have more than one just wrap them all in a parent element like a div or React.Fragment (which I came to know about later).

And I was like

OKAY!!! I can remember that.

But to anyone who is starting with React, you don't have to do that.

P.S. Picture of a Unicorn being happy and agreeing (i.e. thumbs up). I wanted to tell this explicitly as the image can be a little pixelated. Pun Intended.

Understanding how React works

Let us see what is happening under the hood when you are writing JSX and easing through the development process.

JSX is just a syntactic sugar over the createElement method of the React library, but a sugar so sweet no one can avoid it (and no one should).
What this means is what you can do with JSX can be done with React.createElement()

Let's start by making a h1 element.

React.createElement("h1", { id: "myHeading" }, "Unicorn Party Here");

Let me break createElement to you, the first argument it takes defines the type of element we want to create. The second argument takes an object of element's properties and here we are giving it an id. The third argument are its children i.e. anything you would have put between the opening and closing tags like <h1>👉 children here</h1> in normal HTML.

This will make an actual h1 while rendering that looks like <h1 id="myHeading">Unicorn Party Here</h1>

How to add children elements to a parent element

Instinctively thinking from what we saw above, children elements can be added as follows

React.createElement(
  "ul",
  null,
  React.createElement("li", null, "Item one"),
  React.createElement("li", null, "Item two"),
  React.createElement("li", null, "Item three")
);

This will be rendered as

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

We can see that any number of arguments after the second argument are taken as children arguments. This is what happens when you write JSX, it uses createElement and renders the DOM as shown in the examples.

The return statement

Now let's rethink what can we return from a function in JavaScript. With the obvious numbers, strings out of the way functions can return anything in between arrays, objects and even other function but lets look at some caveats with the return statement.

function square(a) {
  return
  a * a;
}

this will be converted to

function square(a) {
  return;
  a * a;
}

as the return statement is affected by automatic semicolon insertion, so no line breaks are allowed. Read more at MDN.

So we use parenthesis() to prevent return from adding automatic semicolon.

function square(a) {
  return (
    a * a;
  )
}

This will return the correct answer.

But looking at the next line you'll say, What Unicorn milk am I drinking 🤷‍♀️🤷‍♂️?

function returnSelf(a, b) {
  return (
    a
    b
  )
}

This is simply wrong syntax

So when you try to return two adjacent JSX elements

return (
  <h1>Hello World</h1>
  <p>Are Unicorns even real?</p>
);

which is the same as

return (
  React.createElement("h1", null, "Hello World")
  React.createElement("p", null, "Are Unicorns even real?")
);

is also the same wrong syntax.

But wrapping it all in a div sounds like a perfect solution and it is

return (
  <div>
    <h1>Hello World</h1>
    <p>Are Unicorns even real?</p>
  </div>
);

which is the same as

return (
  React.createElement("div", {id: "container"}, 
    React.createElement("h1", null, "Hello World"),
    React.createElement("p", null, "Are Unicorns even real?")
  )
);

And this is perfectly valid syntax, I mean we are returning single values from the time we started coding. In fact anything that is valid would work, you can also try returning an array of elements like this.

import React from 'react';
import ReactDOM from 'react-dom';

function ReturnJSXArray() {
  return [<h1>The End</h1>, <h3>🦄🦄🦄🦄</h3>];
}

ReactDOM.render(<ReturnJSXArray />, document.getElementById('root'));

And React will actually render these.

Once you've read this, it seems very obvious that a wrapper is needed for adjacent JSX or you can even return arrays of JSX (which you should avoid) but being so hooked up in learning React we tend to forget the obvious.

Learn Webpack by dumping create-react-app for once.

Tushar Kashyap — Thu, 27 Aug 2020 10:37:45 +0000

So I have been reading Learning React by Alex Banks and Eve Porcello lately and in a chapter they went through the whole process of setting up a React project without using create-react-app, and I felt it is a great thing to know about how stuff works under the hood.

For everyone who doesn't have access to the book I thought it will be a good idea to write on the topic as articles are highly accessible.

P.S. The book is worth the money nonetheless.

Also, I am assuming that you all must be knowing how to use the node package manager (npm) that comes with nodejs.

Now let's see how can we create our own React application

1. Project Setup

Start with initializing the package.json file with npm init so we can install modules. We will install the initial dependencies we need to get started.

npm init -y
npm install --save react react-dom serve

Now let's start working on setting up a skeleton (more like a folder structure). I recommend following along if you are a beginner or if you have never used webpack before.

> node_modules
> package.json
> package-lock.json
> /src (folder)
    > index.js
    > /components (folder)
      > App.js
      > Banner.js
      > Header.js

This is our project folder, it has a very basic setup consisting of a src folder which has the index.js file (this will be our entry point) and a components folder containing App, Banner and Header components.

There are many ways you can structure your app, this is just a very basic, easy to understand structure.

2. Making the Project

Our project will have a header and banner. So let's start by making the Header component.

// ./src/components/Header.js
import React from 'react';

export default function Header() {
  return (
    <header>
      <h2>Checkout these lovely Unicorns</h2>
    </header>
  );
}

and now the Banner component

// ./src/components/Banner.js
import React from 'react';

export default function Banner() {
  return (
    <section>
      🦄🦄🦄🦄🦄🦄🦄🦄🦄🦄🦄🦄Unicorns For SALE🦄🦄🦄🦄🦄🦄🦄🦄🦄🦄🦄🦄
    </section>
  );
}

Add these components to App.js and then render App component through index.js using ReactDOM.render().

// ./src/components/App.js
import React from 'react';
import Header from './Header';
import Banner from './Banner';

export default function App() {
  return (
    <>
      <Header />
      <Banner />
    </>
  );
}

// ./src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('root'));

So now we have completed writing our React components, let's move on to the next step.

3. Setting up Webpack

As our components are split into different modules we will be using webpack which is a module bundler. We cannot write everything directly into one file as that makes development messy so we use a module bundler that bundles everything into one big file that we can use for production.

Let's start by installing webpack and webpack-cli as dev dependencies.

npm install webpack webpack-cli --save-dev

So understanding webpack is a topic of it's own but I'll try to give a high level overview of it. You can see we have import statements all over the place, so webpack will start looking from the entry point we will define in the webpack.cofig file (index.js) and start building a dependency graph as soon it hits any import statements. In a casual language webpack is saying like "Oh, this module needs that module and hey that module needs another module". So it'll bundle everything into one big file.

Now let's build our very basic webpack.config.js file

// ./webpack.config.js
var path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  }
};

This config file has an entry point and an output path, we are telling webpack to start looking from index.js and bundle everything (on the basis of dependency graph) and put the output in a folder named dist in a file named bundle.js, we have also set the mode to development so it will not do any minification and production stuff as of now.

So now webpack is ready to bundle our files but as we are writing JSX and using modern JavaScript we would want a loader which will covert these things into a syntax that every browser (new or old) can understand. We will be using the babel loader here.

npm install babel-loader @babel/core --save-dev

and now we will update the webpack config file to use this loader.

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [{ test: /\.js$/, exclude: /node_modules/, use: "babel-loader" }]
  }
};

The rules property is the place where you will be adding all the loaders (which are JavaScript objects) for various purposes (we will also add sass loader in the end).
Here we are only adding the babel loader which has a test property telling if you see any .js file use the babel loader on it except if the file is a part of the node_modules folder.

Webpack is all set now. The last thing will be to make a .babelrc file specifying the presets telling Babel which transforms to perform. As here we need to transform ESNext (modern JS) syntax to a syntax understandable by all browsers and also transform JSX too. We can do that by the following.

// ./.babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

4. Running webpack

As we installed the webpack-cli you can run webpack from the terminal like this

npx webpack

This will make a dist directory and create the bundle.js in development mode as we stated in the config file. Change the mode to production when you are ready to ship or a common practice is to make scripts in package.json.

// ./package.json
...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"
 },
...

Do npm run build in this case.

5. Making the HTML file

Here we will be making the index.html which will link to the bundle.js file. I'm making it in the dist folder.

// ./dist/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Unicorn Stable</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./bundle.js"></script>
  </body>
</html>

The final folder structure would look like this

> node_modules
> package.json
> package-lock.json
> /dist (folder)
    > bundle.js
    > index.html
> /src (folder)
    > index.js
    > /components (folder)
      > App.js
      > Banner.js
      > Header.js

Now, open the HTML file in the browser and you will see that if everything went well we have the Unicorn sale ongoing 🦄.

6. Adding sass

Let's add some styles to our components. We will be using a single sass file but you are free to use separate sass files for each component as we just have to import it and webpack will bundle it for us using appropriate loaders.

/* ./src/styles.scss */
h2 {
  background-color: #a0c3f0;
  font-size: 200%;
  text-align: center;
}

section {
  border: 2px dotted #ac307c;
  font-size: 150%;
  text-align: center;
  padding: 1em;
}

and then we import them into our App component.

import React from 'react';
import Header from './Header';
import Banner from './Banner';
import '../styles.scss';
....

Let's now install the necessary loaders, we will need style-loader, css-loader, sass-loader (which depends on node-sass).

npm install --save-dev style-loader css-loader sass-loader node-sass

and then we update the webpack config file to check for .scss files and apply the loaders in a set order.

var path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
};

The order is to be kept the same as sass-loader needs to be applied first then css-loader and style-loader at the end (the last one in applied first).

Let's bundle our code one last time with npx webpack and check the browser. All the styles would have been applied :)

Getting those performance gains in React

Tushar Kashyap — Thu, 06 Aug 2020 08:07:00 +0000

This article will be updated with useMemo and useCallback very soon.

This article is aimed to tell the various ways you can boost the performance of your React application 💪.

React itself is quite fast and all the re-rendering is not a problem in the majority of cases. My suggestion would be to read this article and not apply anything until you actually get a performance problem. Bookmark it for later reference when you do apply any of these features/techniques.

1. Using shouldComponentUpdate()

shouldComponentUpdate() is an update life cycle method which can only be used inside class components.

Usage

Inside the method we can return true if we want the component to update or false if we do not want the component to update. To help deciding whether to return true or false (i.e. to update or not) shouldComponentUpdate() takes in two parameters (nextProps and nextState). We can use the incoming props/state and the current props/state to create some meaningful logic that will only return true when it actually makes a difference. We will see this in an example later.

The normal behavior is every time there is an update to the component (i.e. changed state or props) the render() method will be called and the JSX will be re-rendered even if that change makes no difference at all. So that means using no shouldComponentUpdate() defaults to using shouldComponentUpdate() and returning true on every update.

Example

class ChangeTextColor extends React.Component {
  state = {
    textColor: 'blue'
  };

  handleColorChange = (e) => {
    const {name} = e.target;
    this.setState({textColor: name});
  };

  shouldComponentUpdate() {
    return true;  // default behavior, tells component to update every time
  }

  render() {
    console.log("re-rendering...");
    return (
      <>
        <h1 style={{ color: this.state.textColor }}>Unicorn</h1>
        <input
          type="button"
          value="Blue"
          name="blue"
          onClick={this.handleColorChange}
        />
        <input
          type="button"
          value="Red"
          name="red"
          onClick={this.handleColorChange}
        />
        <input
          type="button"
          value="yellow"
          name="yellow"
          onClick={this.handleColorChange}
        />
      </>
    );
  }
}

The above examples has a text whose text-color can be changed by clicking on the different buttons. Now, if you check the console every time you change the color you will see, re-rendering... logged out.

But even if you press the same button as the text color you will see re-rendering... every time. That means this component is re-rendered every time even if the state is not changing meaningfully. Let's edit the shouldComponentUpdate() method to improve this component.

shouldComponentUpdate(nextProps, nextState) {
    if (nextState.textColor !== this.state.textColor) {   // when there is a meaningful change
      return true;
    } else return false;
  }

Now when you try to click a button that does not change the color of the text, the re-rendering will not take place (as we have returned false in shouldComponentUpdate). You can take a look at the console to confirm the same as only when the text-color changes re-rendering... is logged out.

Here's the sample code for you to play around with - shouldComponentUpdate() CodeSandbox

2. Using Pure Components

Pure Components are components which prevent useless re-rendering by checking if the updated props/state value is the same as current props/state value. But there's a catch which we will discuss shortly.

Usage

Pure Components are fairly simple to use. By just extending React.PureComponent instead of React.Component you can convert a class component into a Pure Component. Now when the state/props are changed by any means the component will not blindly re-render every time like a regular component does (i.e. it will do a shallow comparison before before re-rendering).

Example

We will use the same example as before but this time we don't need to write the shouldComponentUpdate() method because a pure component is smart enough to not re-render blindly.

class ChangeTextColor extends React.PureComponent {
  state = {
    textColor: "blue"
  };

  handleColorChange = e => {
    const { name } = e.target;
    this.setState({ textColor: name });
  };

  render() {
    console.log("re-rendering...");
    return (
      <>
        <h1 style={{ color: this.state.textColor }}>Unicorn</h1>
        <input
          type="button"
          value="Blue"
          name="blue"
          onClick={this.handleColorChange}
        />
        <input
          type="button"
          value="Red"
          name="red"
          onClick={this.handleColorChange}
        />
        <input
          type="button"
          value="yellow"
          name="yellow"
          onClick={this.handleColorChange}
        />
      </>
    );
  }
}

What is a Shallow Comparison?

In JavaScript there are primitives and then there are objects (reference type data), primitives are equal when the value and the type (number, string...) are same.

let a = "unicorn";
let b = "unicorn";

console.log(a === b);   // true

Two objects are equal only when they both are referencing to the same object in memory.

let a = {a:1, b:2};
let b = {a:1, b:2};

console.log(a === b);   // false

let c = a;

console.log(a === c)   // true

This must be obvious if you have been working with JavaScript for some time, but when it comes to pure components this behavior can be harmful. Let's look how

Now, imagine you have an array (an object) in your state. At some point in your code if something is pushed inside that array, pure component will think nothing has changed because it still refers to the same array and it will not re-render.

The key point here is do not ever mutate an object/array directly because it still points to the same reference. Always return new object/array.

Another thing to keep in mind is if a parent component is pure and does not re-render all of it's children will also not re-render, so a good practice is to have pure components as children to a parent pure component.

3. Using React.memo()

The things you can do with Pure Components in class components are somewhat possible in functional components using React.memo(), it's a higher order component (HOC), i.e. it wraps around your component and provides you with a new component.

Usage

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

On a higher level just keep in mind that when you wrap your component with React.memo it will not re-render blindly and will shallowly compare the props to decide. A thing to keep in mind is it will only check for props, if the component wrapped in React.memo has a useState or useContext Hook in its implementation, it will still re-render when state or context change.

Again it works great with primitive data types like string and numbers but runs into issues with objects and functions (which are also objects).

Example

First, using primitives.

const Text = React.memo(function Text(props) {
  console.log("re-rendering...") 
  return <h1 style={{color: props.color}}>Unicorn</h1>
})

class ColorChanger extends React.Component {
state = {
  textColor: "blue"
}

handleColorChange = (e) => {
  const {name} = e.target;
  this.setState({textColor: name});
};

render() {
    return (
      <div>
        <Text color={this.state.textColor} />

        <input
          type="button"
          value="Blue"
          name="blue"
          onClick={this.handleColorChange}
        />
        <input
          type="button"
          value="Red"
          name="red"
          onClick={this.handleColorChange}
        />
        <input
          type="button"
          value="yellow"
          name="yellow"
          onClick={this.handleColorChange}
        />
      </div>
    );
  }
}

This is more or less the same example as before using React.memo(), here also no useless re-rendering... will be logged out and will only re-render when color changes actually (as the prop passed to Text changes).

In the last example we will see what happens when we pass a function as a prop.

I will write the same example as above with the slightest of changes

const Text = React.memo(function Text(props) {
  console.log("re-rendering...")
  return <h1 style={{color: props.color}}>Unicorn</h1>
})

class ColorChanger extends React.Component {
state = {
  textColor: "blue"
}

handleColorChange = (e) => {
  const {name} = e.target;
  this.setState({textColor: name});
};

render() {
    return (
      <div>
        <Text color={this.state.textColor} randomFunction={() => console.log("useless function")} />

        <input
          type="button"
          value="Blue"
          name="blue"
          onClick={this.handleColorChange}
        />
        <input
          type="button"
          value="Red"
          name="red"
          onClick={this.handleColorChange}
        />
        <input
          type="button"
          value="yellow"
          name="yellow"
          onClick={this.handleColorChange}
        />
      </div>
    );
  }
}

Here I just passed a randomFunction prop which I'm not even using but now when I press the same button the Text component is re-rendering. What is happening here?
The reason our memoization breaks here is because it's creating a new function on every re-render. And we learned in shallow comparison that any complex type pointing to a different reference are not equal even if it's definition is exactly the same.

Just play around with the code and keep an eye on the console, try removing the function prop and then check the console.
React.memo() CodeSandbox

There are ways you can overcome this (like the useCallback hook) but it will be a topic for another day. Just remember, it works great with primitives but you have to do some extra work to make it work with complex types.

Thank you for reading this article 😄

My suggestion will be to keep writing your react code freely with an open mind and learn to use the profiler to catch performance problems if you feel it's getting slow. These are 3 ways out of the many ways you can improve performance in React Applications.

Also, whenever I had to think of random text only Unicorn seemed to cross my mind. So that's that.

ES6 Default Parameters

Tushar Kashyap — Sun, 02 Aug 2020 12:28:13 +0000

Brief Introduction

Default parameters were released in ES2015 and are used to give default values to function parameters.

When the function is invoked without passing arguments, the default values are used instead.

function multiply(a, b = 3) {
  return a * b;
}

console.log(multiply(5));   // console logs 15
console.log(multiply(3, 2));   // console logs 6

1. Use default parameters at the end.

Using default parameters at the start will require you to pass undefined as an argument (to use the default value) and then the other arguments. An example will make it more clear.

function multiply(a = 5, b) {
  return a * b;
}

console.log(multiply(undefined, 3));   // console logs 15

whereas you could've done

function multiply(a, b = 5) {
  return a * b;
}

console.log(multiply(3));   // console logs 15

2. Default parameters will also override an explicit undefined argument

With default parameters you cannot pass an undefined argument explicitly as seen in the above example. This is not a bummer as undefined is rarely passed as an argument.

function multiply(a, b = 5) {
  return a * b;
}

console.log(multiply(3, undefined));   // console logs 15

3. Use parameters in subsequent default parameters.

What I mean by this is you can set the value of default parameters using the parameters to its left. For example -

function square(a, b = a) {
  return a * b;
}

console.log(square(3));   // console logs 9

4. Call functions as default parameters

Functions invocations can also be used as default parameters. This will be clear with an example.

function square(x) {
  return x * x;
}

function addWithItsOwnSquare(a, b = square(a)) {
  return a + b;
}

console.log(addWithItsOwnSquare(3));   // console logs 12

Please read the code slowly and you will understand what is happening here. This above example demonstrates both the points 3 and 4.

5. Define functions as default parameters

Functions can even be defined instead of being called in default parameters. This can be useful if you don't need this function elsewhere in your code.

function addWithTwenty(a, b = () => 20) {
  return a + b();   //   invoking the function here
}

console.log(addWithTwenty(10))   // console logs 30

Note - These examples are only for demonstration and I don't write square and addWIthItsOwnSquare functions this way and you shouldn't too but it's always good to know the things you can do.

DEV Community: Tushar Kashyap

[Discussion] What's the new big thing in web dev in the past 2 years?

Try using reducers for state management.

Ever heard about reducers before?

Well, great! This article isn't for you 😊.

So what is a Reducer?

Let us look at the params and the return value, shall we?

Time to build!

The useReducer hook!

Using refs to check if a component is still mounted.

The Problem

The Fix

Why use refs?

So why did we use a ref here instead of something like a state variable const [mounted, setMounted] = useState(false)?

Taking it a step further

This is why you can't return adjacent JSX elements.

Understanding how React works

How to add children elements to a parent element

The return statement

Learn Webpack by dumping create-react-app for once.

1. Project Setup

2. Making the Project

3. Setting up Webpack

4. Running webpack

5. Making the HTML file

6. Adding sass

Getting those performance gains in React

1. Using shouldComponentUpdate()

Usage

Example

2. Using Pure Components

Usage

Example

What is a Shallow Comparison?

3. Using React.memo()

Usage

Example

ES6 Default Parameters

Brief Introduction

1. Use default parameters at the end.

2. Default parameters will also override an explicit undefined argument

3. Use parameters in subsequent default parameters.

4. Call functions as default parameters

5. Define functions as default parameters

So why did we use a ref here instead of something like a state variable `const [mounted, setMounted] = useState(false)`?