React Native: why are useState hooks sometimes undefined?

Question

In my React Native app I have two components, A and B :

export const A = () => {
  const [text, setText] = useState('');
  return (
    <View>
      <B
        _text={text}
        _setText={setText}
      />
    </View>
  )
}

const B = ({_text, _setText}) => {
  console log(_text, _setText);
  ...
  ...
}

I console.log _text and _setText in B . This console.log gets called multiple times whenever I open the B component, and sometimes it logs both _text and _setText as undefined .

Does anyone know why this would be?

Answer 1

You're most likely rendering the B Component before the text state is updated. To fix it, check that it isn't null/empty:

export const A = () => {
  const [text, setText] = useState('');
  return (
    <View>
      {text ? <B
        _text={text}
        _setText={setText}
      /> : null}
    </View>
  )
}