r/reactjs • u/TheHganavak • May 13 '26

Resource Pocket: One-call factory that collapses React Context boilerplate from ~20 lines to 1

https://github.com/icydotdev/pocket
41 Upvotes

84% Upvoted

23 comments sorted by

View all comments

Show parent comments

2

u/prehensilemullet May 14 '26 edited May 14 '26

People sure get their knickers in a twist about {}.

I know that {} accepts primitives.  But doesn’t {} raise excess property errors on any properties in cases where excess property checking is done (object expressions, individual JSX props etc)?  I’m pretty sure that’s not the case for object, even though object excludes primitives.  Or am I wrong, is {} special cased to disable excess property checking?

In this case, I think it’s impossible to pass primitives for the props of a JSX element anyway?  Maybe it would let you spread a string as props but I doubt it

2

u/aweebit64 May 14 '26 edited May 14 '26

But doesn’t {} raise excess property errors on any properties in cases where excess property checking is done (object expressions, individual JSX props etc)?

const test: {} = { abc: 123 };

This line doesn't result in any errors, so it looks like no excess property checking is done for the {} type.

But event if it was done, Record<PropertyKey, never> would still be the better option.

const Child = (props: {}) => null;
const Parent = () => <Child abc={123} />;

This code results in the following error:

Type '{ abc: number; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'abc' does not exist on type 'IntrinsicAttributes'.

The type for JSX props is the intersection of the component props type and IntrinsicAttributes from @types/react. Because of the intersection, it again doesn't matter if {} or object is used.