Need some understanding in my code with useState and Events

Question

i need some understanding in my code. I thought i know how usestate works but now i'm confused about my output.

Please i need help.

My Code:

import React, { useState, useEffect } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  Animated,
  View,
  TextInput,
  Button,
  Keyboard,
  ScrollView,
  UIManager,
} from 'react-native';


const TestCustomKeyboard = props => {


  const [inputScrollObj, setInputScrollObj] = useState({
    inputHeight: 10,
    keyBoardHeight: 0,
    scrollContentHeight: 0,
    scrollContentOffsetY: 0
  });

  console.log("A:", inputScrollObj)

  useEffect(() => {
    Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
    Keyboard.addListener("keyboardDidHide", _keyboardDidHide);

    // cleanup function
    return () => {
      Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
      Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
    };
  }, []);

  const inputContentSizeChange = (event) => {
    setInputScrollObj({
      ...inputScrollObj,
      inputHeight: event.nativeEvent.contentSize.height,
    });
    console.log("B", inputScrollObj)
    // Why is the Value 10 and not the inputHeight from the event? 
  }

  const _keyboardDidShow = (event) => {
    setInputScrollObj({
      ...inputScrollObj,
      keyBoardHeight: event.endCoordinates.height,
    });
    console.log("C", inputScrollObj)
    // why is here the inputHeight again 10 and not the setted value 19.42...
  };

  const _keyboardDidHide = () => {
    setInputScrollObj({
      ...inputScrollObj,
      keyBoardHeight: 0
    });
    console.log("D", inputScrollObj)
    
  };

  const scroll1 = (event) => {
    console.log(event.nativeEvent.contentOffset.y)
    console.log(event.nativeEvent.contentSize.height)
  }

  console.log("E", inputScrollObj)

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.contop}>

        <ScrollView
          onScroll={scroll1}
        >
          <Button title="Hallo1" />
          <Button title="Hallo2" />
          <Button title="Hallo3" />
          <Button title="Hallo4" />
          <Button title="Hallo5" />
          <Button title="Hallo6" />
          <Button title="Hallo7" />
          <Button title="Hallo8" />
          <Button title="Hallo9" />
          <Button title="Hallo10" />
          <Button title="Hallo11" />
          <Button title="Hallo12" />
          <Button title="Hallo13" />
          <Button title="Hallo14" />
          <Button title="Hallo15" />
          <Button title="Hallo16" />
          <Button title="Hallo17" />
          <Button title="Hallo18" />
          <Button title="Hallo19" />
          <Button title="Hallo20" />
          <Button title="Hallo21" />
          <Button title="Hallo22" />
        </ScrollView>
      </View>
      <View style={styles.conbottom}>
        <TextInput
          style={{
            height: inputScrollObj.inputHeight,
            paddingHorizontal: 10,
            // paddingVertical: 15,
            backgroundColor: 'yellow'
          }}
          multiline={true}
          onContentSizeChange={inputContentSizeChange}
        />
      </View>

    </SafeAreaView >
  )
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red',
    justifyContent: 'space-between'
  },

  contop: {
    backgroundColor: 'green',
    flex: 1
  },
  conbottom: {
  },
});

export default TestCustomKeyboard;

This is the output from the console by starting the Project. This View is the First View which is showing up.

A: Object {
  "inputHeight": 10,
  "keyBoardHeight": 0,
  "scrollContentHeight": 0,
  "scrollContentOffsetY": 0,
}
E Object {
  "inputHeight": 10,
  "keyBoardHeight": 0,
  "scrollContentHeight": 0,
  "scrollContentOffsetY": 0,
}
B Object {
  "inputHeight": 10,
  "keyBoardHeight": 0,
  "scrollContentHeight": 0,
  "scrollContentOffsetY": 0,
}
A: Object {
  "inputHeight": 19.428571701049805,
  "keyBoardHeight": 0,
  "scrollContentHeight": 0,
  "scrollContentOffsetY": 0,
}
E Object {
  "inputHeight": 19.428571701049805,
  "keyBoardHeight": 0,
  "scrollContentHeight": 0,
  "scrollContentOffsetY": 0,
}

The first question why is in the console.log("B") the inputHeight 10? I mean i set the value to a new height in the function. But then in console.log("A") it assigned to the right value 19.42...

But if i open the keyboard, the inputHeight value is again 10. Why is this happen? This is the output when the keyboard appers.

A: Object {
  "inputHeight": 10,
  "keyBoardHeight": 282.28570556640625,
  "scrollContentHeight": 0,
  "scrollContentOffsetY": 0,
}
E Object {
  "inputHeight": 10,
  "keyBoardHeight": 282.28570556640625,
  "scrollContentHeight": 0,
  "scrollContentOffsetY": 0,
}
C Object {
  "inputHeight": 10,
  "keyBoardHeight": 0,
  "scrollContentHeight": 0,
  "scrollContentOffsetY": 0,
}

Answer 1

You are seting an object using useState !

It's working in async, it's means when you setInputScrollObj your component will reload with the new state.

It's mean the console.log after will render the old value because it will be called before the update

try to use:

useEffect(() => {
  console.log("useEffect:", inputScrollObj)
}, [inputScrollObj]);

Answer 2

I guess it happens cause state changing is asynchronous and console displays old values