在响应中添加 useEffect 的正确方法来调用一次以满足 eslint react-hooks/exhaustive-deps？

Question

I'm using eslint react-hooks/exhaustive-deps the problem I'm having is my component needs to call only once regardless of changes on props. It is fine with [] but when using dependencies it is called multiple time.

my code is (with some omitted)

• parents

// some logic for tracking change in realtime
<Component trackingCode=tracking />

• children:

export default function Component(props){
  // if I use depedencies, it will called multiple times because 
  // trackingCode keep changing
  React.useEffect(()=>{
    // some code
    // fetch function
   const _updateSession = async () => {
      const tracking = props.trackingObject;

      const formData = new URLSearchParams();
      formData.append('trackingCode', tracking.trackingCode);
      formData.append('sessionCode', tracking.sessionCode);
      formData.append('content', trackingStage);

      try {
        const req = await fetch(`https://example.com/tracking/${tracking.id}/`, {
          method: 'PUT',
          body: formData,
        })
        const res = await req.json();

        switch (req.status) {
          case 200:
            props.setQuestion('trackingObject', res);
            break
        }

      } catch (err) {
        console.log(err)
      }
    }
   _updateSession()
  },[props.trackingCode]) 
  // if props.trackingCode is ommited like so [] it works just fine
 

  return (
  <>
    // some code 
  </>)
}

I tried to use useRef but somehow the trackingcode is empty. Is there a way to satisfy the dependencies without making it call multiple times?

thanks

Answer 1

Proper way is that if you want to execute the useEffect at once just don't pass the dependencies in in dependency array. I know you mentioned it but its right way. If you want to run useEffect on state change then pass the state variable in dependency array.

React.useEffect(()=>{
    // some code
    // fetch function
   const _updateSession = async () => {
      const tracking = props.trackingObject;

      const formData = new URLSearchParams();
      formData.append('trackingCode', tracking.trackingCode);
      formData.append('sessionCode', tracking.sessionCode);
      formData.append('content', trackingStage);

      try {
        const req = await fetch(`https://example.com/tracking/${tracking.id}/`, {
          method: 'PUT',
          body: formData,
        })
        const res = await req.json();

        switch (req.status) {
          case 200:
            props.setQuestion('trackingObject', res);
            break
        }

      } catch (err) {
        console.log(err)
      }
    }
   _updateSession()
  },[])