Forem: Dmitriy Mozgovoy

Custom hooks to deal with complex asynchronous code in React

Dmitriy Mozgovoy — Sun, 23 May 2021 20:25:59 +0000

You've probably encountered asynchronous tasks many times inside React components. A typical approach is to split a complex asynchronous task into multiple synchronous ones, wrap them with useEffect, and synchronize those effects through dependencies. In very simple cases, this is not that difficult and expensive, although our component is re-rendered every time we change state, even if some state variables are not used in JSX rendering. But when the task gets more complex, we have to worry about these unnecessary re-renders, using the useMemo hook and other techniques. We can't just use asynchronous functions inside components as we cannot get state updates during its execution due to the nature of JavaScript closures. Moreover, we have to cancel the running asynchronous tasks when components unmount or their dependencies change to avoid the React leak warning that everyone has certainly encountered many times:

Warning: Can't perform a React state update on an unmounted component.

In search of a solution, the use-async-effect2 library was written, which provides several hooks that can work with asynchronous code. They work on top of cancellable promises provided by another one of my projects with cancellable promise (c-promise2), synchronized with React component lifecycle. All async routines are cancellable, so they can be automatically canceled when the component unmounts, or when effect dependency changed, after a timeout, or by the user's request.
The library provides four hooks:

useAsyncEffect
useAsyncCallback
useAsyncDeepState
useAsyncWatcher

useAsyncEffect

Using useAsyncEffect or useAsyncCallback it becomes trivially to make a cancellable request with cp-axios or cp-fetch:

import React from "react";
import { useAsyncEffect } from "use-async-effect2";
import cpAxios from "cp-axios";

/*
 Note: the related network request will also be aborted
 when the component unmounts or on user request
 Check out your network console
 */

function TestComponent(props) {
  const [cancel, done, result, err] = useAsyncEffect(
    function* () {
      return (yield cpAxios(props.url).timeout(props.timeout)).data;
    },
    { states: true, deps: [props.url] }
  );

  return (
    <div className="component">
      <div className="caption">useAsyncEffect demo:</div>
      <div>
        {done ? (err ? err.toString() : JSON.stringify(result)) : "loading..."}
      </div>
      <button className="btn btn-warning" onClick={cancel} disabled={done}>
        Cancel async effect
      </button>
    </div>
  );
}

Of course, you can use any async operations inside async effects, not just a single request, right in the same way.

  const [cancel, done, result, err] = useAsyncEffect(
    function* () {
      this.timeout(props.timeout);
      const data = (yield cpAxios(
        "https://run.mocky.io/v3/39486170-1983-457b-a89f-b0736ccf7961?mocky-delay=2s"
      )).data;
      return (yield cpAxios(
        `https://rickandmortyapi.com/api/character/${data.fetchId}`
      )).data;
    },
    { states: true }
  );

Here is a simple demo of requesting weather data (https://openweathermap.org/ through a proxy on Heroku to hide API key) according to the geo-coordinates of the user. See the full source code in the sandbox below.

const [cancel, done, result, err] = useAsyncEffect(
    function* () {
      this.timeout(30000);
      const {
        coords: { latitude, longitude }
      } = yield getCurrentPosition();
      const response = yield cpFetch(
        `https://blooming-river-02929.herokuapp.com/weather/loc?lat=${latitude}&lon=${longitude}`
      ).timeout(props.timeout);
      return yield response.json();
    },
    { states: true }
  );

useAsyncCallback

Probably, the best way to find out how the hook works is to implement a typical challenge- Live Search. Let's do it using rickandmortyapi.com as our data source:

import React, { useState } from "react";
import {
  useAsyncCallback,
  E_REASON_UNMOUNTED,
  CanceledError
} from "use-async-effect2";
import { CPromise } from "c-promise2";
import cpAxios from "cp-axios";

export default function TestComponent(props) {
  const [text, setText] = useState("");

  const search = useAsyncCallback(
    function* (value) {
      if (value.length < 3) return;
      yield CPromise.delay(1000);
      setText("searching...");
      try {
        const response = yield cpAxios(
          `https://rickandmortyapi.com/api/character/?name=${value}`
        ).timeout(props.timeout);
        setText(response.data?.results?.map(({ name }) => name).join(","));
      } catch (err) {
        CanceledError.rethrow(err, E_REASON_UNMOUNTED);
        setText(err.response?.status === 404 ? "Not found" : err.toString());
      }
    },
    { cancelPrevious: true }
  );

  return (<JSX/>)
}

When you catch any errors with a try...catch block, you must ensure that the caught error is not a CanceledError with reason E_REASON_UNMOUNTED by adding the following line to the beginning of the catch block:

CanceledError.rethrow(err, E_REASON_UNMOUNTED);

The error indicates that the component has been unmounted or its dependencies have changed, so you should simply rethrow the error. This prevents unwanted code execution on unmounted components and protects against React leak warnings appearing.
You can capture the progress and subscribe to the internal AbortController, which has every CPromise instance (useAsyncEffect and useAsyncCallback are running their generator functions in the context of CPromise instance).

  const [cancel, done, result, err] = useAsyncEffect(
    function* () {
      this.progress(setProgress);
      this.signal.addEventListener("abort", () =>
        console.log("controller aborted")
      );
      yield CPromise.delay(15000);
      return "Hello!";
    },
    { states: true }
  );

Another feature is the ability to pause/resume execution:

function TestComponent(props) {
  const [text, setText] = useState("one two three four five");
  const [word, setWord] = useState("");

  const go = useAsyncCallback(
    function* (text, delay) {
      const words = text.split(/\s+/);
      for (const word of words) {
        setWord(word);
        yield CPromise.delay(delay);
      }
    },
    { states: true, cancelPrevios: true }
  );
  return (<div>
       <button onClick={go}>Run</button>
       <button onClick={go.pause}>Pause</button>
       <button onClick={go.resume}>Resume</button>
       <button onClick={go.cancel}>Cancel</button>
     </div>
  )
}

useAsyncCallback has additional options. You can see some of them in the following demo:

useAsyncDeepState

useAsyncDeepState is a deep state implementation (similar to this.setState(patchObject)) whose setter can return a promise synchronized with the internal effect. If the setter is called with no arguments, it does not change the state values, but simply subscribes to state updates. In this case, you can get the state value from anywhere inside your component, since function closures will no longer be a hindrance. It is primarily intended for use inside asynchronous functions.

const delay=(ms)=> new Promise((resolve) => setTimeout(resolve, ms));

function TestComponent(props) {
  const [state, setState] = useAsyncDeepState({
    counter: 0,
    computedCounter: 0
  });

  useEffect(() => {
    setState(({ counter }) => ({
      computedCounter: counter * 2
    }));
  }, [state.counter]);

  const inc = useCallback(() => {
    (async () => {
      await delay(1000);
      await setState(({ counter }) => ({ counter: counter + 1 }));
      console.log("computedCounter=", state.computedCounter);
    })();
  });

  return (<JSX/>);
}

useAsyncWatcher

useAsyncWatcher(...values):watcherFn(peekPrevValue: boolean)=>Promise - is a promise wrapper around useEffect that can wait for updates, return a new value and optionally a previous one if the optional peekPrevValue argument is set to true.

function TestComponent(props) {
  const [counter, setCounter] = useState(0);
  const [text, setText] = useState("");

  const textWatcher = useAsyncWatcher(text);

  useEffect(() => {
    setText(`Counter: ${counter}`);
  }, [counter]);

  const inc = useCallback(() => {
    (async () => {
      await delay(1000);
      setCounter((counter) => counter + 1);
      const updatedText = await textWatcher();
      console.log(updatedText);
    })();
  }, []);

  return (<JSX/>);
}

Note: useCallback was used instead of useAsyncCallback to keep the focus on useAsyncWatcher & useAsyncDeepState hooks.

When these hooks used in conjunction with cancellable CPromise methods (.all, .race, .allSettled, .retry, .delay, .promisify), you get powerful tools for executing asynchronous code.

Thank you for reading, it is very nice to know that there are such strong-willed people who were able to reach the end 😉

Automatic cancellation of async code inside React components with useAsyncEffect & useAsyncCallback hooks

Dmitriy Mozgovoy — Wed, 06 Jan 2021 13:59:59 +0000

I've just made the experimental useAsyncEffect and useAsyncCallback (use-async-effect2 npm package) hooks that can automatically cancel internal async routines when component unmounting. Also, the cancel action can be raised by the user. Correctly canceling asynchronous routines is important to avoid the well-known React warning:
Warning: Can't perform a React state update on an unmounted component. This is an no-op, but it indicates a memory leak in your application.
To make it work, generators are used as a replacement of async functions and basically, you just need to use yield keyword instead of await. The cancellable promise is provided by another my project- CPromise (cpromise2).

useAsyncEffect minimal example (note, the network request will be aborted and not just ignored if you hit the remount button while fetching):

import React, { useState } from "react";
import { useAsyncEffect } from "use-async-effect2";
import cpFetch from "cp-fetch"; //cancellable c-promise fetch wrapper

export default function TestComponent(props) {
  const [text, setText] = useState("");

  useAsyncEffect(
    function* () {
      setText("fetching...");
      const response = yield cpFetch(props.url);
      const json = yield response.json();
      setText(`Success: ${JSON.stringify(json)}`);
    },
    [props.url]
  );

  return <div>{text}</div>;
}

With error handling:

import React, { useState } from "react";
import { useAsyncEffect, E_REASON_UNMOUNTED } from "use-async-effect2";
import { CanceledError } from "c-promise2";
import cpFetch from "cp-fetch";

export default function TestComponent(props) {
  const [text, setText] = useState("");

  const cancel = useAsyncEffect(
    function* ({ onCancel }) {
      console.log("mount");

      this.timeout(5000);

      onCancel(() => console.log("scope canceled"));

      try {
        setText("fetching...");
        const response = yield cpFetch(props.url);
        const json = yield response.json();
        setText(`Success: ${JSON.stringify(json)}`);
      } catch (err) {
        CanceledError.rethrow(err, E_REASON_UNMOUNTED); //passthrough
        setText(`Failed: ${err}`);
      }

      return () => {
        console.log("unmount");
      };
    },
    [props.url]
  );

  return (
    <div className="component">
      <div className="caption">useAsyncEffect demo:</div>
      <div>{text}</div>
      <button onClick={cancel}>Abort</button>
    </div>
  );
}

useAsyncCallback demo:

import React from "react";
import { useState } from "react";
import { useAsyncCallback } from "use-async-effect2";
import { CPromise } from "c-promise2";

export default function TestComponent() {
  const [text, setText] = useState("");

  const asyncRoutine = useAsyncCallback(function* (v) {
    setText(`Stage1`);
    yield CPromise.delay(1000);
    setText(`Stage2`);
    yield CPromise.delay(1000);
    setText(`Stage3`);
    yield CPromise.delay(1000);
    setText(`Done`);
    return v;
  });

  const onClick = () => {
    asyncRoutine(123).then(
      (value) => {
        console.log(`Result: ${value}`);
      },
      (err) => console.warn(err)
    );
  };

  return (
    <div className="component">
      <div className="caption">useAsyncCallback demo:</div>
      <button onClick={onClick}>Run async job</button>
      <div>{text}</div>
    </div>
  );
}

Any feedback is appreciated 😊

c-promise2- a promise library with cancellation, decorators, progress capturing, and more

Dmitriy Mozgovoy — Tue, 08 Dec 2020 19:25:55 +0000

Hi there! Just want some community feedback on my c-promise2 package that provides an extended promise class on top of the native. The library allows you to:

cancel a promise chain (with rejection)
use class decorators
pause/resume your promises
handle timeouts
capture promise chain progress
use internal/external AbortController for sending abort signals
use data flow

Any thoughts, which may arise when you see a code like the following are welcome :)
It's a generic React component that uses CPromise decorators to manage the life cycle of the async code including nested JSON requests. For example, this easily lets you avoid warnings like Warning: Can’t perform a React state update on an unmounted component when you unmount a component with running async tasks.
Demo1

import { async, listen, cancel, timeout } from "c-promise2";
import cpFetch from "cp-fetch";

export class TestComponent extends React.Component {
  state = {
    text: ""
  };

  @timeout(5000)
  @listen
  @async
  *componentDidMount() {
    console.log("mounted");
    const response = yield cpFetch(this.props.url);
    this.setState({ text: `json: ${yield response.text()}` });
  }

  render() {
    return <div>{this.state.text}</div>;
  }

  @cancel()
  componentWillUnmount() {
    console.log("unmounted");
  }
}

Demo2

export class TestComponent extends React.Component {
  state = {
    text: "",
    items: [],
    progress: 0
  };

  constructor(props) {
    super(props);
    this.onAbortClick = this.onAbortClick.bind(this);
  }

  @cancel(E_REASON_CANCELED)
  onAbortClick() {}

  @canceled(function (err) {
    console.warn(`Canceled: ${err}`);
    if (err.code !== E_REASON_DISPOSED) {
      this.setState({ text: err + "" });
    }
  })
  @progress(function (progress) {
    console.log(`Progress: ${progress}`);
    this.setState({ progress });
  })
  @innerWeight(3)
  @listen
  @async
  *componentDidMount() {
    console.log("mounted");
    // concurrent requests with CPromise.all:
    const items = yield [
      this.fetchJSON(
        "https://run.mocky.io/v3/7b038025-fc5f-4564-90eb-4373f0721822?mocky-delay=2s"
      ),
      this.fetchJSON2(
        "https://run.mocky.io/v3/00758c80-8001-4bcc-bf7d-082ac3e1092b?mocky-delay=4s"
      )
    ];
    yield CPromise.delay(500); // just simulate another aync task
    yield CPromise.delay(500);
    yield CPromise.delay(500).weight(0);
    this.setState({ text: `${items.length} requests completed`, items });
  }

  @timeout(15000)
  @async
  *fetchJSON(url) {
    const response = yield cpFetch(url); // cancellable request
    return yield response.json();
  }

  @timeout(15000)
  @async
  *fetchJSON2(url) {
    const response = yield cpAxios(url);
    return response.data;
  }

  render() {
    return (
      <div>
        {this.state.text || (
          <div>
            <ProgressBar animated now={this.state.progress * 100 + ""} />
            <button
              type="button"
              className="btn btn-warning"
              onClick={this.onAbortClick}
            >
              Abort sequence
            </button>
          </div>
        )}
        <ul>
          {this.state.items.map((item, i) => (
            <li key={i}>{JSON.stringify(item)}</li>
          ))}
        </ul>
      </div>
    );
  }

  @cancel(E_REASON_DISPOSED)
  componentWillUnmount() {
    console.log("unmounted");
  }
}