I was wondering what people suggest when working with optional default functions in React.
I have seen our codebase use a mix of () => {} and the lodash noop.
Which is preferable?
This is a general question regarding proper coding techniques.
export default ({
name = '',
value = '',
label = name,
type = 'text',
noLabel = false,
placeholder = '',
required = false,
isInvalid = false,
showBar = true,
inputRef,
onChange = () => {},
onBlurCb, // <-- THE BIT IN QUESTION
...props
}) => (
<Component initialState={{ isFocused: false, hasValue: false }}>
{({ state, setState }) => (
<InputContainer
isFocused={state.isFocused}
isInvalid={isInvalid}
noLabel={noLabel}
{...props}
>
...
This is used as a callback to a synthetic event later down in a component
onBlur={() => {
setState({ isFocused: false })
onBlurCb()
}}
This is the source code of _.noop()
:
function noop() {
// No operation performed.
}
As you can see it's identical to () => {}
.
The main downside to _.noop()
is the need to import it (another line of code).
Except for that, you should use the convention in your team, or if none - the one that is more readable to you.
As a personal preference I would skip the import, and go with () => {}
.