Why doesn't the child component update with the updated prop value?

[arecvlohe]

I have an example playground here: https://playground.solidjs.com/anonymous/61105e7e-bb63-420d-ad64-a1090a588b6c

Here is the code for those interested:

import { render } from "solid-js/web";
import { createSignal, createEffect } from "solid-js";

function Child(props: { value: string }) {
    const [val, setVal] = createSignal(() => props.value)
    createEffect(() => {
      console.log('second effect')
      console.log(val())
    })
    setTimeout(() => setVal(() => "Blue"), 1000)
    return <div style={{ color: 'white'}}>{val()}</div>
}

function Parent() {
  const [value, setValue] = createSignal("Tom");

  setTimeout(() => setValue(() => "Adam"), 3000);

  createEffect(() => {
    console.log('first effect')
    console.log(value())
  })

  return <Child value={value()} />;
}

render(() => <Parent />, document.getElementById('app'));

I was thinking about how in React if a prop value changes, then you have to use React.useEffect to react to those changes to then update the value inside of the useState that accepts that prop. Is that the same case for Solid? I thought that you could reference a reactive prop inside a createSignal and it would update accordingly but it doesn't appear to work that way. When value changes to "Adam" the child value does not update

[sanguogege]

like this ? it is work in solid

import { render } from "solid-js/web";
import { createSignal } from "solid-js";

function Child(props: { value: string }) {
  return <div>{props.value}</div>;
}

function Parent() {
  const [value, setValue] = createSignal("Tom");
   
  setTimeout(() => setValue("Adam"), 3000)
       
  return <Child value={value()} />;
}

render(() => <Parent />, document.getElementById('app')!);

[atk]

This is because in line 5, you do only evaluate props.value once. There is no reactive relation between val and props.value.

The difference between React and Solid is that in React, effects, memos and state are escape hatches from component code re-running again and again, whereas in Solid, they are doors into reactivity, while components run only once. That also means that if you read from a prop outside of a JSX attribute, an effect or a memo, it will not register its reactivity.