-
IMPORTANT: If you have a question or an idea for a new feature use Github Discussions instead Describe the bug To Reproduce
import { createState, createEffect, createMemo, createMutable } from 'solid-js'
import { render } from 'solid-js/web'
function App() {
const state = createMutable({
school: 'school',
home: 'home'
})
const getAll = createMemo(() => {
const home = createMemo(() => {
console.log('Memo: ', state.home)
return state.home
})
const school = createMemo(() => {
console.log('Memo: ', state.school)
return state.school
})
return home() + school()
})
const click = () => {
state.school = state.school + '.'
}
return (
<div onClick={click}>
{state.home + state.school}
<br/>
{getAll()}
</div>
)
}
render(() => <App />, document.getElementById('app')) Expected behavior The End |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments
-
The problem with this example is you create and read at the same level. There is no purpose there as it basically cancels itself out. Computations (like Memos) re-eval when their dependencies change, and since you are creating reading it at the same scope, the second they update their parent will re-evaluate releasing them and starting new. This example actually doesn't benefit at all from the outer The value of nested createMemo's is more like this: const value = createMemo(() => {
const result = calculateSomethingExpensiveButIsRarelyExecuted(someInput())
return createMemo(() => calculateSomethingExpensive(result, someOtherInput()))
}) But what you might notice is it takes 2 function calls to get the inner value. Ie.. I hope that makes sense. This case is rare.. what you probably want is to hoist it out like this: const home = createMemo(() => {
console.log('Memo: ', state.home)
return state.home
})
const school = createMemo(() => {
console.log('Memo: ', state.school)
return state.school
})
const getAll = createMemo(() => {
return home() + school()
}) |
Beta Was this translation helpful? Give feedback.
-
I got it. In addition, I want to know whether this code in the source code can be modified like this? function createProvider(id: symbol) {
return function provider(props: { value: unknown; children: any }) {
return (createMemo(() => {
Owner!.context = { [id]: props.value };
const children = createMemo(() => props.children);
- return createMemo(() => resolveChildren(children()));
+ return () => resolveChildren(children());
}) as unknown) as JSX.Element;
};
} |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
The problem with this example is you create and read at the same level. There is no purpose there as it basically cancels itself out. Computations (like Memos) re-eval when their dependencies change, and since you are creating reading it at the same scope, the second they update their parent will re-evaluate releasing them and starting new.
This example actually doesn't benefit at all from the outer
createMemo
since it is only tracking the memos it creates. You could just remove it and it would do exactly what you want.The value of nested createMemo's is more like this: