DEV Community

John Ding
John Ding

Posted on

Get the last response in React

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

function fetchResults(page) {
  return new Promise((resolve, reject) => {
    const t = Math.floor(Math.random() * 5) + 1;
    setTimeout(() => {
      resolve(page+ '-' + t);
    }, t*1000);
  });
}

export default function App() {
  const [results, setResults] = React.useState([]);
  const [page, setPage] = React.useState(1);

  React.useEffect(() => {
    let ignore = false;
    fetchResults(page).then((res) => {
      if (ignore) {
        setResults([res]);
      }
    });
    return () => {
      // reset ignore before next button click(effect re-run)
      ignore = true;
    };
  }, [page]);

  return (
    <div className="App">
      <button onClick={() => setPage(page + 1)}>Test #{page}</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)