ReactJS State Management API

Last modified on: September 7, 2025

<h1 data-start="471" data-end="522"><strong data-start="473" data-end="522">ReactJS State Management with API Integration</strong></h1>
<p data-start="524" data-end="719">Managing state in React often involves <strong data-start="563" data-end="597">interacting with external APIs</strong> to fetch or send data. Combining <strong data-start="631" data-end="651">state management</strong> with <strong data-start="657" data-end="670">API calls</strong> allows React apps to be dynamic and interactive.</p>
<hr data-start="721" data-end="724" />
<h2 data-start="726" data-end="765"><strong data-start="729" data-end="765">1. Setting Up State for API Data</strong></h2>
<p data-start="767" data-end="843">Use <code data-start="771" data-end="781">useState</code> to store <strong data-start="791" data-end="799">data</strong>, <strong data-start="801" data-end="818">loading state</strong>, and <strong data-start="824" data-end="842">error messages</strong>:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import React, { useState, useEffect } from "react";

function UsersList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

return &lt;div&gt;Users List&lt;/div&gt;;
}

export default UsersList;
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="1129" data-end="1132" />
<h2 data-start="1134" data-end="1184"><strong data-start="1137" data-end="1184">2. Fetching Data from API Using <code data-start="1171" data-end="1182">useEffect</code></strong></h2>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>useEffect(() =&gt; {
  fetch("https://jsonplaceholder.typicode.com/users")
    .then((res) =&gt; {
      if (!res.ok) {
        throw new Error("Network response was not ok");
      }
      return res.json();
    })
    .then((data) =&gt; {
      setUsers(data);
      setLoading(false);
    })
    .catch((err) =&gt; {
      setError(err.message);
      setLoading(false);
    });
}, []); // Empty dependency array ensures this runs once on mount
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1634" data-end="1652"><strong data-start="1634" data-end="1650">Explanation:</strong></p>
<ul data-start="1653" data-end="1838">
<li data-start="1653" data-end="1706">
<p data-start="1655" data-end="1706"><code data-start="1655" data-end="1666">useEffect</code> handles <strong data-start="1675" data-end="1691">side effects</strong> (API calls).</p>
</li>
<li data-start="1707" data-end="1782">
<p data-start="1709" data-end="1782"><code data-start="1709" data-end="1718">loading</code> state shows <strong data-start="1731" data-end="1757">spinner or placeholder</strong> while data is fetched.</p>
</li>
<li data-start="1783" data-end="1838">
<p data-start="1785" data-end="1838"><code data-start="1785" data-end="1792">error</code> state handles <strong data-start="1807" data-end="1837">failed requests gracefully</strong>.</p>
</li>
</ul>
<hr data-start="1840" data-end="1843" />
<h2 data-start="1845" data-end="1887"><strong data-start="1848" data-end="1887">3. Displaying API Data in Component</strong></h2>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>return (
  &lt;div&gt;
    &lt;h1&gt;Users List&lt;/h1&gt;
    {loading &amp;&amp; &lt;p&gt;Loading...&lt;/p&gt;}
    {error &amp;&amp; &lt;p&gt;Error: {error}&lt;/p&gt;}
    &lt;ul&gt;
      {users.map((user) =&gt; (
        &lt;li key={user.id}&gt;
          {user.name} - {user.email}
        &lt;/li&gt;
      ))}
    &lt;/ul&gt;
  &lt;/div&gt;
);
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2162" data-end="2180"><strong data-start="2162" data-end="2178">Explanation:</strong></p>
<ul data-start="2181" data-end="2297">
<li data-start="2181" data-end="2245">
<p data-start="2183" data-end="2245">Conditional rendering based on <code data-start="2214" data-end="2223">loading</code> and <code data-start="2228" data-end="2235">error</code> states.</p>
</li>
<li data-start="2246" data-end="2297">
<p data-start="2248" data-end="2297">Render <strong data-start="2255" data-end="2279">API data dynamically</strong> in the component.</p>
</li>
</ul>
<hr data-start="2299" data-end="2302" />
<h2 data-start="2304" data-end="2345"><strong data-start="2307" data-end="2345">4. Updating State After API Action</strong></h2>
<p data-start="2347" data-end="2419">Suppose you want to <strong data-start="2367" data-end="2384">delete a user</strong> from the API and update the state:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>const handleDelete = async (id) =&gt; {
  try {
    const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
      method: "DELETE",
    });
    if (res.ok) {
      setUsers(users.filter((user) =&gt; user.id !== id)); // Update state
    } else {
      throw new Error("Failed to delete user");
    }
  } catch (err) {
    setError(err.message);
  }
};
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2801" data-end="2818"><strong data-start="2801" data-end="2818">Usage in JSX:</strong></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>&lt;button onClick={() =&gt; handleDelete(user.id)}&gt;Delete&lt;/button&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2893" data-end="2911"><strong data-start="2893" data-end="2909">Explanation:</strong></p>
<ul data-start="2912" data-end="3024">
<li data-start="2912" data-end="2964">
<p data-start="2914" data-end="2964"><code data-start="2914" data-end="2924">setUsers</code> updates the state after API response.</p>
</li>
<li data-start="2965" data-end="3024">
<p data-start="2967" data-end="3024">Component <strong data-start="2977" data-end="3005">re-renders automatically</strong> with updated data.</p>
</li>
</ul>
<hr data-start="3026" data-end="3029" />
<h2 data-start="3031" data-end="3079"><strong data-start="3034" data-end="3079">5. Handling Form Submission to Update API</strong></h2>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>const [name, setName] = useState("");
const [email, setEmail] = useState("");

Web Technology View More