Functional Components with Exactly Two Arguments Implicitly Pure [Proposal]

Suggestion: I suggest that functional components with exactly 2 arguments to be implicitly pure

Benefit By being implicitly pure instead of wrapped with memo, weird wrapping parenthesis and braces are not required, thus boilerplate is reduced

The Problem Several parenthesis and braces in sequence is difficult to read. For example memo wrapping anonymous functions have two parenthesis and one brace: export default memo(({id}) =>

Closing parenthesis and braces are also required

Considerations

• Arguments provided by react@next 16.7.0-alpha.2 to a functional components are nextProps and context
• Advanced React programmers for performance reasons will typically use pure components everywhere
• Novice React users are unlikely to use context, thus unlikely to list 2 arguments should they use functional components or class components
• Traditional components today are a legacy pre-15.4 construct, basically the curse of the planet

Implementation

• The number of arguments a function is declared with are accessible as function-value.length
• function-value.prototype.isReactComponent is truthy when the function-value is a class component

As of React 16.7.0-alpha.2: “Awkward memo-wrapping”

const Pure1 = memo(function C() {
  …
})
const Pure2 = memo(({id}) => {
  …
})

With suggestion implemented:

const Pure1 = ({id}, pure) =>
  <>
    <h1>ID</h1>
    <p>The id is: {id}</p>
  </>
function Pure2({id}, pure) {
  return <>
    <h1>ID</h1>
    <p>The id is: {id}</p>
  </>
}
const Traditional1 = ({data}) => <div>{data.prop}</div>
function Traditional2({data}, context, trad) {
  return <div>
    {data.prop}
  </div>
}

#14469 was a previous abandoned alternative suggestion

[e-mail]

[Li357]

This seems like a headache especially with linters (no-unused-vars). The fact that it’s implicit makes it very hard to understand at a glance that it’s pure if the second unused argument is named anything else.

[ckknight]

Why would I want to add an extra argument to a function if I don’t access or otherwise use that argument? Seems confusing.