03 Component Did Mount

Resume

This example takes as a starting point the 02-use-state-object example.

Let's start practicing with another React's core hook: useEffect

This Hook allows us to subscribe on certain events (check when the component is mounted, check when the component is unmounted, on every render, or when a given property is updated).

Let's start with the most basic, execute a given code when a component is mounted in the DOM.

A common scenario: you want to run some code when a component it's loaded into the DOM, for example loading a list of clients when the component is mounted.

There can be scenarios when we need some code to be executed when a given property value changes or right after each render.

There may be scenarios when all this operations are not synchronous? For instance I want making a call to a server rest api, this will return a promise, it is not safe at all to run this directly in a functional component since the functional component is executed and destroyed, to manage these side effects) we can make use of React.useEffect

In this example we are going to simulate a call to a rest api, in order to retrieve a name (we will use setTimeout).

Steps

First we copy the previous example, and do a npm install

npm install

• Let's open the demo.tsx file, and overwrite it with the following content.

./src/demo.tsx

import React from "react";

export const MyComponent = () => {
  const [username, setUsername] = React.useState("");

  return (
    <>
      <h4>{username}</h4>
      <input value={username} onChange={(e) => setUsername(e.target.value)} />
    </>
  );
};

• If we run the example, the name field will be empty, but we want to assign some value right when the component is mounted? We can make use of React.useEffect passing as a second argument an empty array (that's important if we don't pass this the code inside the useEffect would be executed on mount and after every render).

./src/demo.js

import React from "react";

export const MyComponent = () => {
  const [username, setUsername] = React.useState("");

+  React.useEffect(() => {
+    setUsername("John");
+  }, []);

  return (
    <>
      <h4>{username}</h4>
      <input value={username} onChange={e => setUsername(e.target.value)} />
    </>
  );
};

• Now if you run the sample you can check that John is displayed as user name.

• Let's go one step further, let's simulate an asynchronous call (we will do it using setTimeout).

./src/demo.js

import React from "react";

export const MyComponent = () => {
  const [username, setUsername] = React.useState("");

  React.useEffect(() => {
-    setUsername("John");
+    // Simulating async call
+    setTimeout(() => {
+      setUsername("John");
+    }, 1500);
  }, []);

  return (
    <>
      <h4>{username}</h4>
      <input value={username} onChange={e => setUsername(e.target.value)} />
    </>
  );
};

• Now John is displayed after 1,5 seconds, instead of setTimeout you could use here fetch or any other similar approach to make an ajax request.

About Basefactor + Lemoncode

We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.

Basefactor, consultancy by Lemoncode provides consultancy and coaching services.

Lemoncode provides training services.

For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend