React Hooks can only be called inside the body of a function component

Question

How do I trigger useEffect() on a button click, rather than on rendering the component?

When I use it inside a function like this, I get an error stating:

Hooks can only be called inside the body of a function component

function App() {

  function buttonClicked() {  
    useEffect(() => {
      // Fetch from API
    });
  }

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1 className="App-title">App Title</h1>
      </header>
      <p className="App-intro">
        To get started, edit <code>src/App.js</code> and save to reload.
      </p>
      <button onClick={buttonClicked}>Make API Call</button>
    </div>
  );
}

Answer 1

If your goal is to trigger data fetching upon clicking on a button, there's no need for useEffect. useEffect is used to replace the lifecycle hooks - componentDidMount, componentDidUpdate, and componentWillUnmount.

Think about this - without hooks, will you need these lifecycle hooks at all to achieve what you want? With classes, you simply have to use this.state and a callback that triggers upon clicking of the button; you wouldn't use any of these lifecycle hooks.

The side effect you want to achieve is data fetching, but that's a user-triggered effect and useEffect is not helpful here. useEffect is only helpful when you want to have side effects during the lifecycle of the component.

The code below should do what you want to achieve with hooks, and you don't need useEffect, you only need useState.

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

  function fetchData() {
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        setUser(data.results[0]);
      });
  };
  
  return <div>
    <p>{user ? user.name.first : 'No data'}</p>
    <button onClick={fetchData}>Fetch Data</button>
  </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>