[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.