Does signal support fine-grained prop updates in the React?

[yumjs]

const style = signal({ background: 'red' });

setTimeout(() => {
  // Is it possible to skip the re-rendering of the component <Box> and update the DOM directly?
  style.value = { background: 'green' };
}, 3000);

function Box() {
  return <p style={style}>123</p>;
}

[rschristian]

No, unfortunately that's a limitation of React in that it doesn't give access to what we'd need to support that behavior as we do in Preact.

[yumjs]

@rschristian Does this workaround have potential issues?

const background = signal('red');

setTimeout(() => {
  background.value = 'green';
}, 3000);

function Box() {
  console.log('render');
  const ref = useRef(null);
  useEffect(() => 
    effect(() => {
      if (ref.current) {
        ref.current.style.background = background.value;
      }
    })
  , []);
  return <p ref={ref} style={{ background: background.peek() }}>123</p>;
}

[rschristian]

I don't think that will run into any issues, no.

Up to you whether that's worth it or not.

[rschristian]

Going to close this out as it should be addressed.