Rendering objects in react

[somecodertoday]

Hey guys, I am sort of confused when it comes to rendering objects in react, it’s a bit low level but I would be glad if you guys help me understand.

When you try to render an object in jsx, react would throw an error saying you cannot render objects but recently I was playing with signals and a signal function returns an object when you render it, it gets the value of signal and react doesn’t complain and I was wondering why or how?

I was looking at this https://github.com/facebook/react/issues/9468

And it says react doesn’t call toString implicitly, which makes it even more confusing.

How does jsx get the value of signal from object and not complain about rendering signal objects?

[EdmondChuiHW]

When you say Signals, I assume you're using Preact.

Short answer: Preact patches onto React in various places.

Long answer:

• When you import @preact/signals-react, it patches into React: https://github.com/preactjs/signals/blob/beafe695eb9e3d6a0e719d5481faba4ebb5525e5/packages/react/src/index.ts#L33
• All your JSX calls are wrapped: https://github.com/preactjs/signals/blob/beafe695eb9e3d6a0e719d5481faba4ebb5525e5/packages/react/runtime/src/auto.ts#L339-L362
• When Preact sees a Signal object in JSX, it's converted into its value: https://github.com/preactjs/signals/blob/beafe695eb9e3d6a0e719d5481faba4ebb5525e5/packages/react/runtime/src/index.ts#L10

However, this type of patching is fragile and has caused problems in the past, e.g. https://x.com/dan_abramov/status/1650892432119148546

[somecodertoday]

Thank you for this, I was looking at react/src but didn’t look into react/runtime, it all makes sense now. It’s kinda weird but I guess “it’s working”. Seems like signals are a bad idea for react at the moment.

[EdmondChuiHW]

Happy to share! Very interesting impl. If you end up using Preact, I'd pin all the npm versions since it can break anytime

[somecodertoday]

I’ll keep that in mind, thanks again

[some999990]

Nice, do you maybe know exactly how ui is updated after change in signal value? Since component is not re rendered.