emoji-picker-react | emoji picker component for React applications | Icon library

I'm not exactly sure what your problem actually is (is it that you can't get rid of the warning or that the is either always rendering or never is), but I'll try to address all the problems I see.

Firstly, you shouldn't need to conditionally render the depending on whether MyTextArea is mounted or not. Since components only render after mounting, the will never render if the component it's in hasn't mounted.

That being said, if you still want to keep track of when the component is mounted, I'd suggest not using hooks, and using componentDidMount and componentWillUnmount with setState() instead. Not only will this make it easier to understand your component's lifecycle, but there are also some problems with the way you're using hooks.

Right now, your useRef(true) will set isMountedRef.current to true when the component is initialized, so it will be true even before its mounted. useRef() is not the same as componentDidMount().

Using 'useEffect()' to switch isMountedRef.current to true when the component is mounted won't work either. While it will fire when the component is mounted, useEffect() is for side effects, not state updates, so it doesn't trigger a re-render, which is why the component never renders when you set useRef(null).

Also, your useEffect() hook will fire every time your component updates, not just when it mounts, and your clean up function (the function being returned) will also fire on every update, not just when it unmounts. So on every update, isMountedRef.current will switch from true to false and back to true. However, none of this matters because the component won't re-render anyways (as explained above).

If you really do need to use useEffect() then you should combine it into one function and use it to update state so that it triggers a re-render: