[Suggestion]: Providing formal definition of equality of two JSX values or giving a clarity if there is no formal definition possible.
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 11.8k
- Forks
- 7.9k
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 11
Description
Summary
Formal Definition of Equality of two JSX values. If there is no formal definition possible then give practical guidelines.
Page
https://react.dev/learn/keeping-components-pure
Details
React documentation on "Keeping Components Pure" says that
React assumes that every component you write is a pure function. This means that React components you write must always return the same JSX given the same inputs.
It also mentions:
React offers a “Strict Mode” in which it calls each component’s function twice during development. By calling the component functions twice, Strict Mode helps find components that break these rules.
However, the page does not provide a formal definition of what it means for two JSX values to be "equal."
we can easily say 4 === 4 or "foo" === "foo",
But, To give a simple example, how do we define the equality of two JSX values like: "<Child {childConfig}="object1"> and <Child {childConfig}="object2">"
If object1 and object2 are deeply equal, does that imply that both JSX elements are considered equal as well? Or is equality based on referential identity of object1 and object2?
I think, This distinction is important to understand what it truly means of two JSX values being same.
If such a definition exists elsewhere in the React documentation, it would be helpful to reference it explicitly from this page to clarify expectations around JSX equality and purity.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the “Keeping Components Pure” page linked in the issue and review its explanation of equal inputs and JSX results. Clarify whether JSX equality should be defined formally or replaced with practical guidance about object identity and deep equality, and add an explicit reference or explanation so readers know what “same JSX” means.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- documentation
- Issue type
- Documentation
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100