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

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.