Does the writing of nested createMemo make sense？

[oligay666]

IMPORTANT: If you have a question or an idea for a new feature use Github Discussions instead

Describe the bug
In the source code, such as Provider, the implementation of nested createMemo is used, but I found that nested createMemo should have some problems. For example, the following example

To Reproduce
Provide a code snippet and steps to reproduce the behavior:

1. run this code

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
Only 'Memo: school' is triggered

The End
Does the source code need to cancel the writing of nested createMemo?

[ryansolid]

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:

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.. value()(). However you now basically have levels to how much work is redone. This basically how rendering works in Solid to prevent the whole DOM from being re-created each time.

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()
  })

[oligay666]

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:

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.. value()(). However you now basically have levels to how much work is redone. This basically how rendering works in Solid to prevent the whole DOM from being re-created each time.

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()
  })

I got it. In addition, I want to know whether this code in the source code can be modified like this?
Because resolveChildren is a utility function, there are no reactive variables.

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;
  };
}

[ryansolid]

children might have nested reactive variables. If we have children()()()() from nested control flow I need to wrap here I believe. I'm basically using this to flatten children()()()() to children(). If I don't wrap in a memo it doesn't execute immediately will happen outside of the context owner.