MinthangML

import React, { useRef } from "react";

const RenderCounter = () => {
  const counter = useRef(0);
  
  useEffect(() => {
     // component ကို re-render လုပ်ပြီးတဲ့အချိန်တိုင်း counter က increase လုပ်နေပါလိမ့်မည်။
     counter.current = counter.current + 1;
  });

MinthangML

import React, { useRef } from "react";

const RenderCounter = () => {
  const counter = useRef(0);
    // "Render phase" မှာ ref ရဲ့ value ကို update လုပ်မယ်ဆိုရင်
    // အဲဒီ value က တစ်ကြိမ်ထက်မက increment လုပ်နိုင်ပါတယ်။
   counter.current = counter.current + 1;
  
    return (
      <h1>{`The component has been re-rendered ${counter} times`}</h1>

MinthangML

import React, { useRef, useEffect } from "react";

const Timer = () => {
   const intervalRef = useRef();
   
  useEffect(() => {
     const id = setInterval(() => {
     console.log("A second has passed");
    }, 1000);
    

MinthangML

import React, { useRef } from "react";

const CustomTextInput = () => {
   const textInput = useRef();
   focusTextInput = () => textInput.current.focus();
      return (
         <>
           <input type="text" ref={textInput} />
           <button onClick={focusTextInput}>Focus the text input</button>
        </>

MinthangML

import React, { Component, createRef } from "react";

class CustomTextInput extends Component {
  textInput = createRef();
  focusTextInput = () => this.textInput.current.focus();
  
  render() {
    return (
      <>
        <input type="text" ref={this.textInput} />