Uncaught TypeError: create is not a function using useEffect React Hook with AJAX request

Question

I'm trying to use React hooks to fetch some data and display it, but am getting an error:

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>

Uncaught TypeError: create is not a function
    at commitHookEffectList (react-dom.development.js:15901)
    at commitPassiveHookEffects (react-dom.development.js:15911)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at commitPassiveEffects (react-dom.development.js:17299)
    at wrapped (scheduler-tracing.development.js:204)
    at flushPassiveEffects (react-dom.development.js:17338)
    at dispatchAction (react-dom.development.js:12035)
    at eval (index.jsx? [sm]:9)

Waggish

Answer 1

It's because no callback function is being passed into useEffect. In the example above, it is actually executing the fetch request which doesn't return anything. Wrap the fetch call in an arrow/anonymous function and it will work.

function App() {
  const [user, setUser] = React.useState(null);
  React.useEffect(() => { // Pass in a callback function!
    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>

Waggish

Answer 2

useEffect must have a callback function. In this case you can use an arrow/anonymous function inside the brackets. useEffect(()=>{your code})

Excelsior

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Okun

Answer 3

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'));

try using this

Frontal