Skip to content

fix(useIntersection): accept nullable element refs - #2738

Open
wanxiankai wants to merge 1 commit into
streamich:masterfrom
wanxiankai:fix/2612-nullable-intersection-ref
Open

wanxiankai wants to merge 1 commit into
streamich:masterfrom
wanxiankai:fix/2612-nullable-intersection-ref

Conversation

@wanxiankai

Copy link
Copy Markdown

Description

Fixes #2612.

With React 19's types, useRef<HTMLDivElement>(null), useRef(null), and createRef<HTMLDivElement>() return refs whose current type explicitly includes null. Passing those refs to useIntersection currently fails with TS2345 because its parameter is declared as RefObject<HTMLElement>.

Accept RefObject<HTMLElement | null> so the declaration matches the hook's existing null handling. The implementation continues to observe a populated ref and disconnect when the element is removed.

The tests now use a typed createRef, cover useRef(null), and exercise an explicitly nullable ref from null to an element and back to null. The test imports the hook directly so that its types can also be checked independently against different React definitions.

Type of change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as before)

Validation

  • yarn test --watchman=false: 76 suites and 494 tests passed.
  • Focused useIntersection suite: 11 tests passed; 100% statements, branches, functions, and lines.
  • yarn lint:types and yarn build: passed, including CJS and ESM declaration output.
  • yarn lint: passed with 97 existing warnings and no errors.
  • Separate TypeScript 5.9.3 checks with @types/react 17.0.0, 18.3.1, and 19.0.0: the updated test file and a consumer fixture using all the ref forms above compile with all three versions. With the original signature, React 19 produces three TS2345 errors in the updated test file and four in the consumer fixture. String refs and SVG element refs remain rejected in every version.

The project's dependencies are unchanged. Runtime tests use the project's React 17 installation; the React 18 and 19 checks above validate types.

Checklist

  • Read the Contributing Guide
  • Perform a code self-review
  • Comment the code, particularly in hard-to-understand areas — no new complex logic
  • Add documentation — the existing documented ref usage is restored; no usage change
  • Add hook's story at Storybook — existing story remains applicable
  • Cover changes with tests
  • Ensure the test suite passes (yarn test)
  • Provide 100% tests coverage
  • Make sure code lints (yarn lint)
  • Make sure types are fine (yarn lint:types)

Implementation and PR text were prepared with AI assistance (OpenAI Codex).

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

useIntersection warning with React 19

1 participant