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

El issue no nombra archivos, pruebas ni puntos de entrada; empieza por aclarar qué patrones de React hooks y selecciones de dependencias están dentro del alcance. Se consideraría terminado cuando haya un conjunto de patrones acordado y un comportamiento observable del refactor para los ejemplos de useMemo, useCallback y JSX, con pruebas definidas para esos casos.