signia icon indicating copy to clipboard operation
signia copied to clipboard

Warn or throw error when signal.value is read untracked during component render

Open justjake opened this issue 2 years ago • 1 comments

Currently users can write a function component that looks like this, that appears to work on first render or if a parent subscribes to an atom, but actually isn't reactive to atom changes. The example comes from Discord:

const Prova = ({name}: {name: Atom<string>})=>{
  return <>
  <input type="text" value={name.value} onChange={(e)=>name.set(e.target.value)}/>
  <div>Your name is {name.value}</div>
  </>
}

Signia and/or Signia-react should either log a warning or throw an error if a component reads an atom during render in a non-reactive way. Starbeam implements this by checking React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner.current, which is only set when in development versions of React.

In Notion's internal state management system, we throw an error when this happens.

justjake avatar Apr 25 '23 22:04 justjake

Yeah this feels like it could save a lot of frustration! I'm down for adding a console.warn, maybe with an option to turn it into a thrown error if folks wanna get strict.

ds300 avatar Apr 27 '23 10:04 ds300