[Meta] Refactors of React hooks

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.

The issue names no files, tests, or entry points; begin by clarifying which React hook patterns and dependency selections are in scope. Done would require an agreed pattern set and observable refactor behavior for the useMemo, useCallback, and JSX examples, with tests defined for those cases.