Can we set default value of a variable as empty arrow function while destructuring in Javascript?

Question

I was working on a react project and came accross this situation. Is it okay to set an empty arrow function to a variable while destructuring in javascript. Are there any cons if done like this ?

const { onClick = () => {} } = props;

Answer 1

Doing this will assign the empty function to onClick if there if props does not have an onClick key. So while this is a legal method to have a default value for a prop key which might not be guaranteed to exist, the cons of doing this will have to be evaluated by you in the context of your app.

Answer 2

In general that's okay, if you really want onClick to be a do-nothing function when it either doesn't exist on props or it has the value undefined. Specifically in the context of a React component, though:

• The majority of the time, the component you'd be passing onClick to afterward will expect that it may get undefined for the function prop, so there's not much point in defaulting it.
• By doing this, you're creating a new function every time, which means that any component you pass onClick to will see it as a new value and have to re-render, even if it's memoized and could avoid re-rendering if onClick hadn't changed. In that case, again, undefined would be the better choice, since it would avoid unnecessary re-renders.

Here's a simple example showing the effect of the unstable function reference on a memoized component:

const { useState } = React;

const MemoizedComponent = React.memo(({ onClick, label }) => {
    console.log(`${label} rendering`);
    return (
        <button type="button" onClick={onClick}>
            {label}
        </button>
    );
});

const Example = (props) => {
    const [counter, setCounter] = useState(0);
    const { onClick1 } = props;
    const { onClick2 = () => {} } = props;
    return (
        <div>
            <div>Counter: {counter}</div>
            <input
                type="button"
                value="+"
                onClick={() => setCounter((c) => c + 1)}
            />
            <MemoizedComponent onClick={onClick1} label="Button 1" />
            <MemoizedComponent onClick={onClick2} label="Button 2" />
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Notice how "Button 2" renders every time you click +, but "Button 1" doesn't. That's because "Button 2" gets onClick2 which we're defaulting to () => {}, but "Button 1" gets onClick1 which we're leaving as undefined.

My other answer here has more about how/why unstable function references cause unnecessary re-rendering of memoized components.