Nameless functional components to be implicitly pure [Proposal]

[haraldrudell]

Suggestion:

• I suggest that React considers nameless functional components to be implicitly pure
• Such a function is a function value whose name property is the empty string, ie. evaluates to false
• Such function is created either by:
  • An anonymous function expression or
  • A function expression where the name is blank

Reason:
One of the most important optimizations is to use pure components and immutable

Today:
For functional components today, this means wrapping them in memo

Benefit with this proposal:
By not having to use memo and instead implicitly have functions without a name being pure, the number of weird parenthesis and boilerplate is reduced

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

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

With suggestion implemented:

const Pure3 = ({id}) => <div>{id}</div>
const Pure4 = function ({id}) {
  return <>
    Pure4
  </>
}

harald.rudell@gmail.com

[haraldrudell]

This does not actually work in Node.js v11.3.0
node --eval "const Pure3 = () => {}; const P = Pure3; P.name = 'x'; console.log(P.name)"
Pure3
node --eval "console.log((() => {}).name.length)"
0
One could use toString, but it is not guaranteed to be present
node --eval "const Pure3 = (() => {}); const P = Pure3; P.name = 'x'; console.log(P.toString())"
() => {}
node --eval "const Pure3 = function () {}; const P = Pure3; P.name = 'x'; console.log(P.toString())"
function () {}