React update useState() when variable value changes

Question

How to update UseState() when variable 'matchUrl' changes. when navigating to another route the 'matchUrl' value changes. and the changes is reflected on console.log and on the 'h1' tag. but not the usestate(), it keeps the old value.

import React, {useState} from 'react'
import useInfinityScroll from './hooks/useInfinityScroll'
import names form './data/names'    

function TableList({ match }) {
   let matchUrl = match.params.name

   const dataMatch = names.filter(name => name.occupation === matchUrl)

   const [listNames, setListNames] = useState(dataMatch.slice(0, 10))

   const [isFetching, setIsFetching] = useInfinityScroll(fetchMoreListItems) //fetches more items when scrolling to bottom of page


   function fetchMoreListItems() {
    setTimeout(() {
      setListNames([...dataMatch.slice(0, 20)])
      setIsFetching(false)
    }, 2000)
   }


   return (
     <>
       <h1>{matchUrl}</h1>

       <div>
         {listNames.filter(name => name.occupation === matchUrl).map(listNames => <Table key={listNames.id} name={listNames} />)}
       </div>
     </>
   )
}

 export default TableList

Kavindu Vindika · Accepted Answer · 2021-08-19 01:24:03Z

3

useState hook takes initial value of the state as an argument, but it only assign the initial value to the state at the component mounting phase, not during re-rendering of the component if anything changes. Therefore, after initial rendering, state won't be changed even if the dataMatch variable changes.

Therefore, you need to have useEffect hook having dependency on dataMatch variable to keep track on its changes. Then you will be able to update the state when you've component re-rendering.

Use the following way to update the state.

  useEffect(() => {
    setListNames(dataMatch.slice(0, 10));
  }, [dataMatch]);

For more information on useEffect hook, please refer https://reactjs.org/docs/hooks-effect.html

Hope this will solve your issue.

edited Aug 19, 2021 at 1:24

answered Aug 19, 2021 at 1:09

Kavindu Vindika

2,7972 gold badges16 silver badges23 bronze badges

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

Comments

Nuwan.Niroshana · Accepted Answer · 2021-08-19 04:17:58Z

1

You haven't set the state for 'matchUrl'.Do the following modification to your code.

function TableList({ match }) {
  let [matchUrl, setMatchUrl] = useState(match.params.name);

  return (<><h1>{matchUrl}</h1></>);
}

Also when you change 'matchUrl' manually for any reason, you should use setMatchUrl('value') function to update the value

answered Aug 19, 2021 at 4:17

Nuwan.Niroshana

4071 gold badge4 silver badges15 bronze badges

Comments

Mike · Accepted Answer · 2021-08-19 01:52:24Z

0

Here is the sample code. Hope this will help you 😇

import React, {useState, useEffect} from 'react'



 function TableList({ match }) {
       let matchUrl = match.params.name

       useEffect(() => {
       // YOUR_CODE_HERE WILL RUN WHEN the match.params.name is change

       }, [match.params.name])
}

you can take a look also about documentation about useEffect

edited Aug 19, 2021 at 1:52

Mike

24.5k14 gold badges84 silver badges93 bronze badges

answered Aug 19, 2021 at 1:47

Sochetra Nov

4653 silver badges7 bronze badges

Collectives™ on Stack Overflow

React update useState() when variable value changes

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