context value as a default prop?

Just had a general question regarding the “Rules of Hooks”

Don’t call Hooks inside conditions

I was curious why this wouldn’t be allowed for useContext for the example below

const Icon = ({
	spritemap = React.useContext(IconSpriteContext), // eslint complains about this
	symbol,
	...otherProps
}) => {
	return (
		<svg
			{...otherProps}
			role="presentation"
		>
			<use data-href={`${spritemap}#${symbol}`} />
		</svg>
	);
};

We wanted to provide both a way to use a direct prop for the spritemap OR allow for context to be created at the top level of the app.

Any feedback is appreciated, thanks!

[gaearon]

Your example has a conditional call to useContext because it depends on the value of spritemap. This is why we warn.

We don’t want to make the rules different for useContext and other Hooks. It makes it hard to refactor later when you want to change useContext(MyThing) to a higher-level useMyThing() Hook which might include state or effects.

[kunukn]

Interesting

then maybe it should NOT be a linter warning?, maybe the linter needs to be adjusted?