How come this.setState doesn't work properly in componentDidUpdate hook. Feels like async issue, but don't know how to handle it

Question

What I'm trying to do is in a hook componentDidUpdate find height of a block and then set a height: 0. So I can animate height after all of this block. I have multiple blocks and content is different. Here is my hook

state = {
    height: 0,
    active: true
}

myRef = React.createRef();

componentDidMount() {
    console.log(this.myRef.current.offsetHeight, "before");
    this.setState({...this.state, height: this.myRef.current.offsetHeight})
    console.log(this.state.height, "after")
    this.setState({...this.state, active: false})
}

As you can see on a picture console.log shows before right height, then I assign this height and then second console.log still shows me 0

I think I have issue with async code, but don't know what is exactly could be a solution By the way trying to do an accordion.

Answer 1

setState is asynchronous functions

state = {
    height: 0,
    active: true
}

myRef = React.createRef();

componentDidMount() {
    console.log(this.myRef.current.offsetHeight, "before");
    this.setState({height: this.myRef.current.offsetHeight}, () => {console.log(this.state.height, "after")})
    this.setState({active: false})
}