[Meta] Refactors of React hooks

この issue ではファイル、テスト、エントリーポイントが指定されていないため、まずどの React hook パターンと依存関係の選択を対象にするのかを明確にします。完了条件は、合意されたパターンのセットと、useMemo、useCallback、JSX の例に対する観測可能なリファクタリングの挙動が定まり、それらのケースのテストが定義されていることです。

Search Terms

refactor, react, hooks

Suggestion

Provide a series of refactors about react hooks.

Use Cases

In my recently works. I have alway Wrap function, value declarations, expressions into React.useMemo or React.useCallback.
And I must find all the depends on the selection. And always missing some deps. It's not a good experience.

Could we provide some refactors to wrap something into well-known react hooks?

I'm not sure where's the bar of patterns we are allowed. but we have already had something like 'react-jsx'.

Examples

const Comp = props => {
  const value = props.a + props.b;

  const handleClick = () => {
    console.log('foo', value)
  }

  return <div onClick={handleClick}><SomeHeavyComponent value={value}/></div>
}

• When I select props.a + props.b, convert into

React.useMemo(() => props.a + props.b, [props.a, props.b]);

• When I select handleClick or the lambda, convert into

const handleClick = React.userCallback() => {
  console.log('foo', value)
}, [value])

• When I select <SomeHeavyComponent value={value}/>, convert into

React.useMemo(() => (<SomeHeavyComponent value={value}/>), [value])

Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.