Load Function Using React useEffect Only Once

Load Function Using React useEffect Only Once

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.

This tutorial shows how to load function using the React useEffect only once.

 Example 1: Loading Function Using React Only Once

You can give an empty array to the useEffect as a second argument to load the function only once. Below is the code:

function MyComponent() {
  useEffect(() => {
    loadDataOnlyOnce();
  }, []);

  return
   <div>{/* ... */}</div>;
}

Example 2:

function App() {
const [user, setUser] = React.useState(null);

React.useEffect(() => {
fetch('https://randomuser.me/api/')
.then(results => results.json())
.then(data => {
setUser(data.results[0]);
});
}, []); 

return <div>
{user ? user.name.first : 'Loading...'}
</div>;
}

ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>