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

user_935936 0
Viewed 8482

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>
  );
}
react-hooks reactjs javascript
2 Answers

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/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

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

user_17519460

Sounds like you misunderstood the usage of useEffect. It's like componentDidUpdate hook - it is being triggered depending on value change, not directly by some function. When render method is called, useEffect is also called. Hard to tell what is your goal, but from your snippet it makes most sense just to call fetch without any hook. But to answer your question, one way to trigger useEffect would be to update your state and you can create useEffect hook to be triggered only if value of particular property is changed:

const [buttonClicked, setButtonClicked] = useState(false);

useEffect(() => {
  // Fetch from API
}, [buttonClicked]); 

<button onClick={() => setButtonClicked(true)}>Make API Call</button>

Now when you click, useEffect should be triggered, but because you added , [buttonClicked], it won't be called if any other property value changes.

user_45541160
Related