How do I trigger React UseEffect on only the first render?-CodePudding

In am using React and trying to trigger a function only once, when the page initially loads. Currently, the below code triggers the console message twice at page load.

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

export default function TestRef(){

    const [inputValue, setInputValue] = useState("");
    const count = useRef(null);

    const myFunc = () => {
        console.log('Function Triggered');
    }

    useEffect(() => {
        if(!count.current){
            count.current = 1;
            myFunc();
        }
        return () => { count.current = null; }
      }, []);

    return (
    <>
      <p>Page content</p>
    </>
  );
}

I have read up on how React 18 intentionally double-renders elements, which is my reason for using useRef and for returning the cleanup function in the useEffect hook, but it still doesn't seem to work.

CodePudding user response：

hi please make sure you didn't invoke TestRef componenet twice in your page!

for debug and find rerenders you can use react profiler extention on chrome then remove extra rerender by using momo and useMemo and useCallback

CodePudding user response：

Finally got it to work by doing this. This appears to only run myFunc() once, on the initial rendering of the component.

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

export default function TestRef(){

    const [inputValue, setInputValue] = useState("");
    const count = useRef(null);

    const myFunc = () => {
        console.log('Function Triggered');
    }

    useEffect(() => {
        if(count.current == null){
            myFunc();
        }
        return () => { count.current = 1; }
      }, []);

    return (
    <>
      <p>Page content</p>
    </>
  );
}