React useEffect not re-rendering functional component

Question

I am passing an access token into a functional component as props. I need the functional component to re-render when the access token has change. I am using useEffect to setState when said access token has change. It is not re-rendering as expected.

const Panel = (props) => {

  const [accessToken, setAccessToken] = useState('');

  useEffect(() => {
    setAccessToken(props.accessToken)
  }, [props.accessToken])

  return (...)
}

Expected: Panel re-render after props.accessToken changes.

Actual: Panel does not re-render with updated props.accessToken value.

Everything looks good with your code. Can you provide a reproducible example — Johnny Zabala
– Johnny Zabala, Commented Sep 4, 2019 at 1:01
Have you verified that a defined value for accessToken is passed to Panel? ie, a value that is not '' as per the inital state? — Dacre Denny
– Dacre Denny, Commented Sep 4, 2019 at 1:07
@DacreDenny How would I verify that in Panel? I tried console log in the useEffect and it returns null for accessToken. accessToken value is defined in the parent component by an api call which sets the token value with "this.accessToken = response.data". Then, <Panel accessToken={this.accessToken} /> — Joseph
– Joseph, Commented Sep 4, 2019 at 1:13
If you add console.log("props.accessToken=", props.accessToken) before the line with useState, what is logged? — Dacre Denny
– Dacre Denny, Commented Sep 4, 2019 at 1:15
I cannot post source code due to company policy. However, in the parent component instead of setting access token value to this.accessToken, I set the access token value to state. That seems to solve the problem. So does this mean component variable changes is not passed down to child component unless it is a state variable? — Joseph
– Joseph, Commented Sep 4, 2019 at 1:31

ravibagul91 · Accepted Answer · 2019-09-04 01:30:05Z

3

As per your comment,

accessToken value is defined in the parent component by an api call which sets the token value with "this.accessToken = response.data". Then, <Panel accessToken={this.accessToken} />

Component do not re-render based on local instance variable, in your case this.accessToken.

You need to actually set the token in state, and then pass it to child component.

this.setState({accessToken : response.data})

And then pass it from state,

<Panel accessToken={this.state.accessToken} />

answered Sep 4, 2019 at 1:30

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

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

Collectives™ on Stack Overflow

React useEffect not re-rendering functional component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related