Text input loses focus with useState event - reactjs

Question

I am building a React component that uses react-ace to input markdown that is rendered in real time. Every time I type a letter, the letter gets entered and then focus immediately changes and I can no longer type without clicking back into the editor.
Here is the code for the component:
export default function Edit(props) {
let placeHolder = props.isNew ? md : "";
let urlParams = useParams();
let navigate = useNavigate();
let action;
let actionName;
const [contents, setContents] = useState(placeHolder);
const [post, setPost] = useState({});
const [idToken, setIdToken] = useState(null)
Auth.currentSession().then((s) => setIdToken(s.idToken.jwtToken))
if (!props.isNew) {
useEffect(() => {
getPost(urlParams.postId)
.then(post => {
setContents(post.contents);
setPost(post);
});
}, [props.postId]);
action = () => {
updatePost(post, contents, idToken)
.then(() => navigate('/'))
}
actionName = "Update"
}
else {
action = () => {
newPost(contents, idToken)
.then(() => navigate('/'))
}
actionName = "Create"
}
return (
<Authenticator hideSignUp={true}>
<PageContainer single={true}>
<ActionMenu action={action} cancel={() => navigate('/')}>{actionName}</ActionMenu>
<ContentContainer>
<AceEditor
mode="markdown"
theme="monokai"
onChange={v => {setContents(v)}}
name="editor"
height="100%"
width="60vw"
value={contents}
/>
<MarkdownWrapper>{contents}</MarkdownWrapper>
</ContentContainer>
</PageContainer>
</Authenticator>
)
}
I noticed that removing the setContents() call from the onChange prop of the AceEditor component stops this from happening which leads me to believe that this component is being re-rendered every time I type, causing focus to change. I tried removing contents from the value prop in case that was causing the re-render, but nothing changed.
How can I stop this component from re-rendering whenever setContents() is called?

Answer 1

I'm noticing two issues:
You are making an api call here: Auth.currentSession().then((s) => setIdToken(s.idToken.jwtToken)) outside of a useEffect. For the token, it would seem you would want to only call that once when the component mounts, so you want to pass an empty array as the second argument. For more info: https://medium.com/nerd-for-tech/fetching-api-using-useeffect-hook-in-react-js-7b9b34e427ca
You're calling useEffect in an if statement which is against the rules of hooks. https://ru.react.js.org/docs/hooks-rules.html
Try fixing these issues and seeing if the problem goes away.