SebastianVerified account

How does it work?

Build-time plugin composes a signature for each component. A signature contains each use* call in component body with: 1. its name 2. stringified LHS of how its result is used It also composes signatures of every custom Hook inside. (Each is defined with same mechanism.)

Something like this for final example: useHNSearch.__signature__ = 'useState{const [data, setData]} useEffect'; SearchResults.__signature__ = 'useState{const [page, setPage]} useHNSearch{const data}' + '!' + useHNSearch.__signature__;

As long as you don't break other rules this should be sufficient to detect adding/removing/reordering Hooks, even inside other custom Hooks

There are some corner cases like when there's no LHS, e.g. useState(useContext(Foo)), or when custom Hook is in TDZ so can’t reference it eagerly, so will need to work it out a little. But getting common cases right is usually good enough.

No LHS could use the statement/expression position, with some offsets. What do you mean by a custom hook in TDZ?

Ah nevermind, I understand. A sufficiently smart compiler (*cough cough*) could inline it instead of using string concat.

yarn add sufficiently-smart-compiler