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)

Yangshun Tay · Accepted Answer · 2018-11-11 06:18:40Z

43

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>

answered Nov 11, 2018 at 6:18

Yangshun Tay

53.7k34 gold badges126 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tadiwa Dhunda · Accepted Answer · 2022-03-04 09:29:42Z

3

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

answered Mar 4, 2022 at 9:29

Tadiwa Dhunda

311 bronze badge

1 Comment

Community Over a year ago

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.

Ahmet Emre Kilinc · Accepted Answer · 2024-06-16 06:06:05Z

0

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

edited Jun 16, 2024 at 6:06

Ahmet Emre Kilinc

7,05119 gold badges37 silver badges49 bronze badges

answered Jun 13, 2024 at 11:31

Kunaal Sharma

1

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related