Reactive props

When a parent passes name={name()}, the child doesn't receive a copy of the value. props.name is a getter that reads the parent's signal each time it is accessed. Read it where the value is used, in JSX or a derived function, and it stays live:

function Avatar(props) {
  const initials = () =>
    props.name
      .split(" ")
      .map((word) => word[0])
      .join("");
  return <div class="avatar">{initials()}</div>;
}

Destructuring, as in function Avatar({ name }), reads every prop once while the component is set up. The result never changes again.

For a default value, use ?? where the prop is read: props.size ?? 48.

Try it: type in the box. The avatars don't change, because avatar.jsx destructures its props; the console's STRICT_READ_UNTRACKED warning points at the line. Read props.name and props.size instead, give size a default of 48, and the initials will follow your typing.