What part of the React lifecycle is the best place to run the code to show the keyboard?

[haveamission]

I am trying to integrate this into a React app, and I am noticing that the keyboard opens, closes, and then opens again and the whole viewport resizes and looks awful.

This is when running the keyboard launch in the render() method - is there a better way to launch the keyboard in React? React Cordova apps are relatively rare and I'm not seeing many instances of how to handle this.

[EddyVerbruggen]

I have 0 React experience, so don't expect an answer from me.

[flache]

I call the showMessenger method in componentDidMount (so I already have the ref for the autoscrollElement) and hideMessenger in componentWillUnmount

[corncobb]

If you are using React Hooks, useEffect with nothing in the dependency array would be equivalent to componentDidMount. Use a useEffect cleanup method would be the same as componentWillUnmount.

useEffect(() => {
     // Put your show keyboard code in here
     
     return () => {
     // Put your componentWillUnmount code here
     }

}, [])