Search code examples
javascriptreactjslodashno-op

Is a 'noop' [lodash] default parameter required for function props?


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()
          }}

Solution

  • 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 () => {}.