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

Issue không nêu rõ tệp, bài kiểm thử hay điểm vào nào; trước tiên hãy làm rõ những mẫu React hook và lựa chọn dependency nào nằm trong phạm vi. Công việc được xem là hoàn tất khi đã thống nhất một tập hợp mẫu và xác định được hành vi refactor có thể quan sát đối với các ví dụ useMemo, useCallback và JSX, đồng thời định nghĩa các bài kiểm thử cho những trường hợp đó.