Evaluate `react/no-unstable-nested-components`

[amannn]

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md

I was a bit unsure which of these patterns is preferable for a longer time:

function LinkButton({href, ...rest}) {
  const Component = useMemo(() =>
    function Link(props) {
      return <a href={href} {...props} />
    },
    [href]
  );

  return <Button as={Component} {...rest} />
}

function LinkButton({href, ...rest}) {
  return <Button as="a" href={href} {...rest} />
}

… the second one has the advantage that the component remains mounted for the lifetime of the component. I was concerned however about handling an unknown prop like href within Button.

After discovering react-polymorphic-types I'm now largely in favour of the second approach. I'm not sure yet if it's worth linting for, but we could consider it.

I'd set allowAsProps to true in any case to not be too restrictive.