storing the response using useEffect to avoid re-rendering using react hooks

Question

I am using React hooks and trying to figure out, how should I store the response of the api call response.data._embedded.assets in a state variable.

Using setAssets(response.data._embedded.assets); doesn't work because of re-rendering. So I decided to use useEffect as shown in the code below but this violates the rules of react hooks -Hooks can only be called inside of the body of a function component. I understand that useEffect should be defined outside as per react hooks but then how would I store the response in a state variable ? Please advise.

const [selectedTabIndex, setselectedTabIndex] = useState(0);
    const [assets,setAssets] = useState([]);

  
    
    let companyCategory;
    axios
    .get(url, {
        params: {
            assetCategoryId: selectedTabIndex
        }
    }).then(response => {
    if (sessionStorage.getItem('companyCategory') !== null) {
        companyCategory = JSON.parse(sessionStorage.getItem('companyCategory') )
      
    }
    console.log("Inside response of web api call");
    console.log(response.data._embedded.assets);
    useEffect(() => {
        // Should not ever set state during rendering, so do this in useEffect instead.
        setAssets(response.data._embedded.assets);
      }, []);
    //setAssets(response.data._embedded.assets);
   
}).catch(err => console.log(err));

In a class component, the above state variable declaration would be like this inside the response:

this.setState({
        companyCategory: companyCategory,
         assets: response.data._embedded.assets
     })

You say Using setAssets(response.data._embedded.assets); doesn't work because of re-rendering but that doesn't make sense. Shouldn't you WANT to re-render, after receiving a response, because that's when you have actual data to display? — nbokmans
– nbokmans, Commented Jun 2, 2021 at 14:08
Ah I see now. I think what you want to do is put your Axios call inside a useEffect(() => {}, []) (a useEffect without any dependencies listed in the [] is equivalent to componentDidMount) and call setAssets from that. The reason you get the too many re-renders is because your API call is re-done every re-render, which then updates state, which re-renders component, which triggers the api call, etc — nbokmans
– nbokmans, Commented Jun 2, 2021 at 14:12
When I used setAssets(response.data._embedded.assets); there was some sort of loop I can see in console log which was never ending. What might be causing this? — Tan
– Tan, Commented Jun 2, 2021 at 14:12
Ok, you mean something similar to what Kevin C. Ferron mentioned as his answer below? — Tan
– Tan, Commented Jun 2, 2021 at 14:14

Kevin C. Ferron · Accepted Answer · 2021-06-02 14:13:34Z

2

I would put the whole get request in useEffect.

    const [selectedTabIndex, setselectedTabIndex] = useState(0);
    const [assets,setAssets] = useState([]);

    useEffect(() => {
        // Should not ever set state during rendering, so do this in useEffect instead.
        
    
    let companyCategory;
    axios
    .get(url, {
        params: {
            assetCategoryId: selectedTabIndex
        }
    }).then(response => {
    if (sessionStorage.getItem('companyCategory') !== null) {
        companyCategory = JSON.parse(sessionStorage.getItem('companyCategory') )
      
    }
    console.log("Inside response of web api call");
    console.log(response.data._embedded.assets);
    
    setAssets(response.data._embedded.assets);
   
}).catch(err => console.log(err));
 
}, []);

answered Jun 2, 2021 at 14:13

Kevin C. Ferron

1591 silver badge8 bronze badges

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

Comments

Alfonso Tienda · Accepted Answer · 2021-06-02 14:12:06Z

0

If a component doesn't need to render when it changes, don't put it in state. You can have a module-scope variable in your component and use that.

With class components, you can also put it on this

answered Jun 2, 2021 at 14:12

Alfonso Tienda

3,7271 gold badge24 silver badges37 bronze badges

Comments

cool_code · Accepted Answer · 2021-06-02 14:19:04Z

0

why do you fetch data if you don't want to use that, also we can't use react hooks inside functions

Call Hooks from React function components
Call Hooks from custom Hooks

answered Jun 2, 2021 at 14:19

cool_code

2084 silver badges9 bronze badges

Collectives™ on Stack Overflow

storing the response using useEffect to avoid re-rendering using react hooks

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related