faceyspacey / faceyspacey/remixx
plan for selectors
- Dominant language
- JavaScript
- Stars
- 12
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
So we have this right:
```js
```js
//INPUT:
export const MyComponent = (props, state, actions) => {
return
}
// --> BABEL PLUGIN OUTPUT:
// rename the original component
const MyComponentOriginal = (props, state, actions) => {
return
}
// and then simply use it as a function in conjunction with our context-powered React Hook:
export const MyComponent = (props) => {
const { state, actions } = useRespond('__respond_pending_chunk_id__')
return MyComponentOriginal(props, state, actions)
}
```
Selectors takes it to this:
```js
//INPUT:
export const MyComponent = (props, state, actions) => {
return
}
// NOTE: we can detect selectors on our state object because they are methods, not properties
export const MyComponent = (props, state, actions) => {
return
}
export const MyComponent = (props) => {
const { state, actions } = useRespond('__respond_pending_chunk_id__')
return useMemo(() => MyComponentOriginal(props, state, actions), [state.fooSelector(props)])
}
```
> so notice how we call `state.fooSelector` again. Rather than do all the babel parsing to find what variable it's assigned to. The thinking is that the selector will be cached and quick to access anyway, so we might as well make our babel work easy.
The babel work is detecting what methods on `state` are accessed within the original component. And then put em in the `useMemo` array.
There's one caveat, notice how we're passing in `props`. We could have selectors like:
```js
state.fooSelector(props.something)
```
In other words, the developer could have designed their selectors so they take primitives directly (perhaps after some calculations of their own) instead of props.
So yea, that's a problem. We likely do have to solve that. In any event, I just wanted to present a guiding light for a possibility for how simple we could get this. If somehow we can make it so all u gotta do is the above, the babel aspects can be written super quickly, and **boom**, we got our selves selector support!
----
Final note: the key thing here vs. what Dai-Shi was saying is that the only way to bail out of component re-rendering because of cached values/selectors is via useMemo **outside the component code we want to prevent from rendering**. In this case, basically our thin wrapper component function does near zero work if the selector is cached because `useMemo` returns a cached component branch. I assume React has some extra intelligence surrounding this feature to know to not even try to remember the cached return of `useMemo`.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.