DEV Community

setState in Reactjs is not a function

Sai Avinash Duddupudi on December 22, 2020

I'm new to react and I am trying to hit an API using fetch and then setState to a state variable but it is throwing the error as Unhandled Reject...

Read full post

syntaxhacker • Dec 22 '20

if you are new to react dont bump into react hooks at first . read and follow some react introduction posts on this platform and by the way setState is not a react function .

working code

import React from "react";
import { useState } from "react";
import "./styles.css";

export default function App() {
  const [person, setPerson] = useState([]);
  fetch("https://jsonplaceholder.typicode.com/users")
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      setPerson(data);
    });
  console.log("dasdasd", person);
  return <div className="App">{JSON.stringify(person)}</div>;
}

Sai Avinash Duddupudi • Dec 22 '20 • Edited

hey, when I ran this code, it is repeatedly hitting the API and never stopping. I want it to run only once

syntaxhacker • Dec 22 '20 • Edited

If you only want to run useEffect once , you can give it an empty array as second argument.

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        setPerson(data);
      });
  }, []);

Sai Avinash Duddupudi • Dec 22 '20 • Edited

yes thanks for useeffect, Now I wanted to pass this person to customers state variable but it is rendering as empty which is exactly why I have not used useEffect in the first place {"data":[]}

import React from "react";
import { useState, useEffect } from "react";
// import "./styles.css";

export default function App() {
  const [person, setPerson] = useState([]);
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        setPerson(data); // You Need this For set Person to `state person`
      });
  }, []);
  console.log("dasdasd", person);
  const [customers, setCustomers] = useState({ data: person });
  return <div className="App">{JSON.stringify(customers)}</div>;
}

Burak Saraloglu • Dec 22 '20

You can check for data !== null && return (...) for conditional rendering. Since it will rerender after data loaded, it would also prevent from empty rendering.

Sai Avinash Duddupudi • Dec 22 '20 • Edited

It is being empty forever, not re-rendering at all.

Burak Saraloglu • Dec 22 '20

I just saw what you did in your customer state. You shouldn't initialize customer state with promise state. What I mean by that is:

export default function App() {
const [person, setPerson] = useState([]);
useEffect(() => {
fetch("jsonplaceholder.typicode.com/users")
.then((response) => {
return response.json();
})
.then((data) => {
setPerson(data); // You Need this For set Person to state person
});
}, []);
console.log("dasdasd", person);

// This is the part which is updated:

const [customers, setCustomers] = useState({});

// Passing person as a dependency will allow customers to update automatically
useEffect(() => {
person !== null && setCustomers({data: person});
}, [person])

return

{JSON.stringify(customers)};

}

Sai Avinash Duddupudi • Dec 22 '20 • Edited

useEffect(() => {
    person !== null && setCustomers({data: person, isLoading: true, filteredData: person});
    }, [person])

By dependency, you mean the above block of code gets called every time until person state is changed?

Burak Saraloglu • Dec 22 '20

It works like this:
1-) Initial page rendering with empty person state, then renders your fetch effect (the second effect did not process because person === null)
2) After the first effect process is done, it will change the person and we put the person state as a dependency for the second effect, it will re-render. Then obviously it will re-render the part of the document.

So, it will not get called until the person state is changed. It will get called if the person state changes.

Sai Avinash Duddupudi • Dec 24 '20 • Edited

Since we added person as dependency , you said it will re-render when person state is updated. so there might be chances of hitting the API twice right? depending upon the person state?

Please correct me If I am wrong

Burak Saraloglu • Dec 24 '20

As far as I remember, we should've written API connection in separate effect. So, It shouldn't hit for API twice. It will only recall for customers effect.

PS: There's a solution below: after you call for API, setPerson and setCustomers.

.then((data) => {
setPerson(data);
setCustomers(data) // You Need this For set Person to state person
});

Maybe this can work aswell.

syntaxhacker • Dec 22 '20

you can just add this right?


.then((data) => {
        setPerson(data); 
        setCustomers(data) // You Need this For set Person to `state person`
      });

Emmanuel Aiyenigba • Dec 22 '20

No. It won't work that way. setState() cannot be called with React hooks.
const [person, setPerson] = useState([])
In the state hook method, the second parameter (in this case setPerson) is what is used to change/update the state.
Now instead of setState(data), do setPerson(data) and it should work just fine.

Sai Avinash Duddupudi • Dec 22 '20

The reason I am not using setPerson is because it has be wrapped under useEffect hook but I want to pass this person data to another useState Variables.

Since useState happens in initial load, if we use useEffect I wont be able to pass data to useState variables

Sean Allin Newell • Dec 23 '20

You still need setPerson. Basically with a functional component using hooks, setState is not defined. Hence your type error.