Great question! Let's break this down from both code cleanliness and best practice perspectives.

Is your current approach following development norms? #

First off: yes, your existing code is totally valid and aligns with basic React development standards. Arrow functions are a common go-to in JSX when you need to pass callbacks that rely on component props or state, and there’s nothing inherently wrong with writing them this way.

That said, it does have a minor drawback: every time your parent component renders, you’re creating two separate arrow function instances. In most scenarios (like when <SomeForm> isn’t a memoized component or doesn’t rerender frequently), this performance impact is negligible. But the repetition is unnecessary, so cleaning it up will make your code easier to maintain.

More concise optimization approaches #

Here are a few cleaner ways to handle this duplicate callback logic:

1. Extract a reusable handler function #

The simplest fix is to define a single handler outside your JSX, then pass it to both props. This eliminates redundant code immediately:

// Inside your component (before the return statement)
const handleCleanup = () => cleanupHere(props);

// In your JSX
<SomeForm onGoClick={handleCleanup} onNoGoClicked={handleCleanup} />

2. Optimize with useCallback (for memoized child components) #

If <SomeForm> is wrapped in React.memo (or is a pure component), creating a new handler on every render could trigger unnecessary rerenders. Wrap your handler in useCallback to memoize it, ensuring it only updates when props changes:

import { useCallback } from 'react';

// Inside your component
const handleCleanup = useCallback(() => cleanupHere(props), [props]);

// In your JSX
<SomeForm onGoClick={handleCleanup} onNoGoClicked={handleCleanup} />

The dependency array ([props]) tells React to only recreate the function when props changes, keeping your child component renders efficient.

3. Directly pass cleanupHere (if it fits the callback signature) #

If cleanupHere doesn’t require extra wrapping (i.e., the callbacks <SomeForm> provides don’t pass arguments you need to ignore), you could pass it directly—though this only works if cleanupHere already has access to props (e.g., it’s defined inside your component or has props bound to it):

// Only works if cleanupHere doesn't need to ignore unexpected arguments from the callbacks
<SomeForm onGoClick={cleanupHere} onNoGoClicked={cleanupHere} />

Use this cautiously: if <SomeForm> passes event objects or other parameters to the callbacks, this would pass those to cleanupHere, which might break things if cleanupHere expects only props.

Final takeaway #

Your original code is perfectly acceptable for simple use cases, but extracting a reusable handler (with useCallback if needed) makes your code DRYer and more maintainable. It’s a small improvement that pays off as your component grows!

内容的提问来源于stack exchange，提问作者Susssshi