React useEffect to save textarea text

Question

I am trying to make a memo pad where a user can write in a textarea and save it. When the page opens, I want the same text to remain in the textarea.

I don't want to use the onChange event because it gets rendered with every input So I am trying to use onSubmit and useEffect.

I am new to react and trying to understand hooks. But after reading all the documents I am still lost.

I am using Ionic framework and below is my code,

<IonCard>
       <form className="memo" onSubmit={handleSubmit(text)}>
             <IonItemDivider><IonLabel>관리자용 메모판</IonLabel></IonItemDivider>          
             <IonItem>
                  <IonTextarea id="memoTextarea" rows={28} value={text} name="memoTextarea" ref={register({})} ></IonTextarea>
             </IonItem>
             <IonButton type="submit" fill="solid">저장</IonButton>
       </form>
</IonCard>

Can anybody help me, how will I implement the useEffect code ?

useEffect(()=>{
      

}, []);

What do I put inside handleSubmit()?

Answer 1

react-hook-form uses uncontrolled components by default. Uncontrolled means you don't have to control the state yourself, the components handle it for you (in this case IonTextarea). It also means that your parent component doesn't re-render because it doesn't have to reflect the changes from the dependency state since it doesn't have any.

You can make sure the component is uncontrollable by not initializing the value in the input component. You can confirm that your component doesn't re-render by logging in the render method.

<IonTextarea
  id="memoTextarea"
  rows={28}
  // comment the following line will make the component uncontrollable
  // and your component never re-renders when you type
  // value={text}
  name="memoTextarea"
  ref={r => register(r)}
></IonTextarea>

Live Demo