Search Component gotcha in ReactJS

Gaurav Singh — Fri, 07 Jan 2022 15:23:43 +0000

Sometimes back I was working on a typeahead component that was fetching data from an API and I observed that search query was different from the value in the search field.

After some investigation I realized that this is happening because the setter from the useState is asynchronous, so fetch is happening before the value is set.

const handleSearch = (e) => {
    setQuery(e.target.value);
    fetch(`http://example.com/users.json?query=${query}`)
      .then(response => response.json())
      .then(data => setRecords(data));
  }

After some exploration I realized that making a fetch call on the event is the wrong approach, rather we should fetch data as a side effect of the query, which means when the value of query changes in the component.

// Detect dark theme var iframe = document.getElementById('tweet-1125041041063665666-402'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1125041041063665666&theme=dark" }

We should use useEffect to solve this issue. When the value of query changes useEffect will fetch data from the API.

const handleSearch = (e) => {
    setQuery(e.target.value);
  }

  useEffect(() = > {
    fetch(`http://example.com/users.json?query=${query}`)
      .then(response => response.json())
      .then(data => setRecords(data));
  }, [query]);

In this case, we are setting the value of query in the event handler and fetch is happening inside the useEffect block.

For complete solution -
https://gist.github.com/c0d3b1n/469016b05c8020d0b20f130a8bdf94aa

DEV Community: Gaurav Singh

Search Component gotcha in ReactJS