Skip to content

Commit

Permalink
feat: create react-inner-hooks rfc
Browse files Browse the repository at this point in the history
  • Loading branch information
@tkow
tkow committed Feb 7, 2022
1 parent f744f67 commit b59a3c4
Showing 1 changed file with 316 additions and 0 deletions.
316 changes: 316 additions & 0 deletions text/0000-inner-hooks.md
View file
@@ -0,0 +1,316 @@
- Start Date: 2022-02-06
- RFC PR:
- React Issue:

# Summary

Add a special props named innerHooks to React.Component and extend createElement.

# Basic example

Giving that, you want child prop using hooks combined with redux state and define useOptions as a hook followed by example.

```tsx
export function useOptions = () => {
const users = useSelector()
return useMemo(() => {
return users.map((user) => {
return {
id: user.id,
label: user.name
}
})
}, [users])
}
```


```tsx
import { useOptions } from './useOptions'

const Example = (props) => (
<Parent>
<Component
innerHooks={() => ({
options: useOptions()
})}
/>
</Parent>
)
```

nearly equals to

```tsx
import { useOptions } from './useOptions'

const Example = (props) => {
const options = useOptions()
return(
<Parent>
<Component options={options} />
</Parent>
)
}
```

but, they are different about execution scopes. The formar is in child scope and the latter is in parent scope.
In addition, innerHooks prop must return partial props of the component.

# Motivation

Component often needs conditional renderning but hooks must be written before their even if they don't depend on the condition for [idempotent calling rule of hooks](https://reactjs.org/docs/hooks-rules.html).

OK:

```tsx
const Example = (props) => {
const options = useOptions()
const {initialized, data} = useFetchData()
if (!initialized) return null
return <Component {...data} options={options} />
}
```

Bad:

```tsx
const Example = (props) => {
const {initialized, data} = useFetchData()
if (!initialized) return null
const options = useOptions()
return <Component {...data} options={options} />
}
```

or

```tsx
const Example = (props) => {
const {initialized, data} = useFetchData()
if (!initialized) return null
return <Component {...data} options={useOptions()} />
}
```

This is not problem when component is small, but big one is tough to read.

```tsx
const Example = (props) => {
const options = useOptions()
const [optionValue, setOptionValue] = useState()
const {initialized, data} = useFetchData()
const someValue = ''
if (!initialized) return null
return (
<Component>
<Child>
<AnnoyedField
value={someValue}
onChange={someChange}
class='test'
otherProps
/>
<AnnoyedField
value={someValue}
onChange={someChange}
class='test'
otherProps
/>
<AnnoyedField
value={someValue}
onChange={someChange}
class='test'
otherProps
/>
<AnnoyedField
value={someValue}
onChange={someChange}
class='test'
otherProps
/>
<AnnoyedField
value={someValue}
onChange={someChange}
class='test'
otherProps
/>
<AnnoyedField
value={someValue}
onChange={someChange}
class='test'
otherProps
/>
<AnnoyedField
value={someValue}
onChange={someChange}
class='test'
otherProps
/>
<Select
value={optionValue}
onChange={setOptionValue}
options={options}
otherProps
/>
<AnnoyedField
value={someValue}
onChange={someChange}
class='test'
otherProps
/>
<AnnoyedField
value={someValue}
onChange={someChange}
class='test'
otherProps
/>
<Child/>
</Component>
) {...data} options={useOptions()} />
}
```

As the farther place it's used from definition, it's more tough to remember the variable name and we are forced to use editor's trick like code jump, bookmark, splited view, etc. Or scroll and switch page many times.

The RFC way can envelop independent hooks against others in narrower scope.

```tsx
const Example = (props) => {
// ... Omitted
const {initialized, data} = useFetchData()
if (!initialized) return null
return (
<Component>
{/* ...Omitted */}
<Select
innerHooks={() => {
const [optionValue, setOptionValue] = useState()
const options = useOptions()
return {
options,
value: optionValue,
onChange: setOptionValue
}
}}
otherProps
/>
{/* ...Omitted */}
</Component>
)
```
And this is more useful to move the component to other place compared to the past. This example may be meaningless because state created by useState scope is very limited. It's for sake of simplicity. If you use wide scope state and handler like redux or recoil or widely-context, you'll find this feature powerful. Now we can use hooks in context instead of extracting components per container or context's consumer which tends to become a source of trouble about optimizing rendering and readability. For example, we can write context to the extent of root component scope without separationg files.
```tsx
const Context = createContext ()
const Example = (props) => {
// ... Omitted
const {initialized, data} = useFetchData()
if (!initialized) return null
return (
<Context.Provider value={{value: 'any'}}>
{/* ...Assuming a vast of <AnotherFieldNoDependsOnContext /> */}
<Field
innerHooks={() => {
const {value} = useContext(Context)
return {
value,
}
}}
/>
{/* ...Assuming a vast of <AnotherFieldNoDependsOnContext /> */}
</Context.Provider>
)
```
This can limit context scope and are easier to know and extract loosely-coupled component compared to followed by the context example, we could just only use provider in the past, and it's easy to miss how many we set curly braces for deep nests.
```tsx
const Context = createContext ()
const Example = (props) => {
// ... Omitted
const {initialized, data} = useFetchData()
if (!initialized) return null
return (
<Context.Provider value={{value: 'any'}}>
<Context.Consumer>
{
({value}) => {
return (
<>
{/* ...Assuming a vast of <AnotherFieldNoDependsOnContext /> */}
<Field
innerHooks={() => {
const {value} = useContext(Context)
return {
value,
}
}}
/>
{/* ...Assuming a vast of <AnotherFieldNoDependsOnContext /> */}
</>
)
}
}
</Context.Consumer>
</Context.Provider>
)
```
There is simular problem about readability even if you use consumer per components.
# Detailed design
The innerHooks is called in intermediate layer from parent and child.
React render function create component only call hooks and merge props passed by innerProps.
```tsx
function InterMediate(props) {
const propsFromInnerHooks = innerHooks && innerHooks()
return <Child {...props} {...propsFromInnerHooks}>
}
```

In api level, we may be able to optimize performance.

```tsx
React.createElement(Hello, {innerHooks: someHandleHookFunction}, null)

function createElement(Component, props, ...children) {
if(props.innerHooks) {
props = merge(props, props.innerHooks())
}
// continue to original function process
}
```

# Drawbacks

- possible to be worse rendering performance by intermediate hooks
- incliding parent scope variables in innerHooks can perfome unexpected side effects.
- type inference is more complicated, it needs returned type of innerHooks and exclude them from original props if it injected


# Alternatives

No idea.

# Adoption strategy

- This does not have any breaking changes. It can ignore if there is not an innerHooks prop, unless users name a prop innerHooks.
- React typing library like flow and typescript should change component type so that infer props type when exists the innerHooks prop.

# How we teach this

The terminology is innerHooks.

We may need only adding innerHooks usage the React Hooks entry of document.

And introduction as new feature is enough.

# Unresolved questions

- How to imprement innerHooks during rendering.
- I may not consider enough how extent innerHooks side effects by innerHooks of decendants from parent have bad effects.

0 comments on commit b59a3c4

Please sign in to comment.