JavaEar 专注于收集分享传播有价值的技术资料

What should be returned from useEffect hook when the body function does a condition check?

问题描述


英文原文

I'm using the useEffect hook, and in some cases I do not need to return anything. What is the best way to handle this situation?

// fooRef is a reference to a textfield (belonging to the same component). Sometimes the fooRef is not there,because of redirections) that's why I need to check if it exists

useEffect(() => fooRef.current && fooRef.current.focus()  , [fooRef])

When using it like this, React complains with the following error message: An effect function must not return anything besides a function, which is used for clean-up. You returned null. If your effect does not require clean up, return undefined (or nothing).

Would the best option be to return undefined or an empty function?


中文翻译

I'm using the useEffect hook, and in some cases I do not need to return anything. What is the best way to handle this situation?

// fooRef is a reference to a textfield (belonging to the same component). Sometimes the fooRef is not there,because of redirections) that's why I need to check if it exists

useEffect(() => fooRef.current && fooRef.current.focus()  , [fooRef])

When using it like this, React complains with the following error message: An effect function must not return anything besides a function, which is used for clean-up. You returned null. If your effect does not require clean up, return undefined (or nothing).

Would the best option be to return undefined or an empty function?

I'm using the useEffect hook, and in some cases I do not need to return anything. What is the best way to handle this situation?

// fooRef is a reference to a textfield (belonging to the same component). Sometimes the fooRef is not there,because of redirections) that's why I need to check if it exists

useEffect(() => fooRef.current && fooRef.current.focus()  , [fooRef])

When using it like this, React complains with the following error message: An effect function must not return anything besides a function, which is used for clean-up. You returned null. If your effect does not require clean up, return undefined (or nothing).

Would the best option be to return undefined or an empty function?

I'm using the useEffect hook, and in some cases I do not need to return anything. What is the best way to handle this situation?

// fooRef is a reference to a textfield (belonging to the same component). Sometimes the fooRef is not there,because of redirections) that's why I need to check if it exists

useEffect(() => fooRef.current && fooRef.current.focus()  , [fooRef])

When using it like this, React complains with the following error message: An effect function must not return anything besides a function, which is used for clean-up. You returned null. If your effect does not require clean up, return undefined (or nothing).

Would the best option be to return undefined or an empty function?

3个回答

    最佳答案

  1. 英文原文

    I think you intended to write

    useEffect(() => {if (fooRef.current) fooRef.current.focus()  } , [fooRef])
    

    Your current implementation is returning the result of the boolean result of fooRef.current && fooRef.current.focus() rather just executing the focus function if fooRef.current is true.


    中文翻译

    I think you intended to write

    useEffect(() => {if (fooRef.current) fooRef.current.focus()  } , [fooRef])
    

    Your current implementation is returning the result of the boolean result of fooRef.current && fooRef.current.focus() rather just executing the focus function if fooRef.current is true.

  2. 参考答案2

  3. 英文原文

    When you write above syntax in arrow function, you are explicitly informing to return fooRef.current.focus(), so do something like below

    useEffect(() => { if(fooRef.current) fooRef.current.focus() } , [fooRef])
    

    中文翻译

    When you write above syntax in arrow function, you are explicitly informing to return fooRef.current.focus(), so do something like below

    useEffect(() => { if(fooRef.current) fooRef.current.focus() } , [fooRef])
    
  4. 参考答案3