In React, what is the difference between creating a function inside useEffect() and importing it from another file?

Question

At work, I stumbled upon code like this

function Component({ data }) {
    const [number, setNumber] = useState(0);
    const [speed, setSpeed] = useState(0);
    const [angle, setAngle] = useState(0);
    useEffect(() => {
        const updateValues = (newValue, check, setter) => {
            if (check) {        
                setter(newValue):
            } else {
                setter(null):       
            }
        };
        updateValues(10, true, setNumber);
        updateValues(20, false, setSpeed);
        updateValues(30, true, setAngle);
    }, [data]);

    // ...
}

Here, we can see that there is a function named updateValues() in useEffect(), which can perform multiple status updates. I was told to export this function into another file to resolve performance issues.

// file1.js
export const updateValues = (newValue, check, setter) => {
            if (check) {        
                setter(newValue):
            } else {
                setter(null):       
            }
        };

// Component.js

import { updateValues } from "file1.js";

function Component({ data }) {
    const [number, setNumber] = useState(0);
    const [speed, setSpeed] = useState(0);
    const [angle, setAngle] = useState(0);
    useEffect(() => {
        updateValues(10, true, setNumber);
        updateValues(20, false, setSpeed);
        updateValues(30, true, setAngle);
    }, [data]);

    // ...
}

I've always wondered if something like this is actually a problem in React? The official React documentation provides multiple function examples in useEffect(), but barely mentions garbage collection. I'm wondering if garbage collection will properly destroy imported functions at the appropriate time.

My assumption is that importing a function or whatever creates something in memory that remains there even if we don't need it.

I'm not sure if this question is an "opinion-based" question, as I'm just looking for an explanation of how memory and garbage collection work inside useEffect().

Answer 1

The reason you are advised to do this is that your useEffect is created every time the component code runs - which may be more often than it is rendered. All of these things are not used 90% of the time they are made, so their creation and garbage collection are useless. Therefore, the more things that can be moved outside the component, the better. If an imported function (or a function you create outside of a functional component) gets garbage collected, it doesn't matter that much because it's only created once, whereas anything you define in a component is created hundreds or thousands of times .

To be honest, your function and its usage are a bit strange. I'm assuming it's just pseudocode, because if not, your useEffect function body would be better, like this

setNumber(10);
setSpeed(null);
setAngle(30);

Also, consider using useReducer, which helps define functions outside the component in a way that developers can better understand.