Fix/typography quotes mirroring text #8002

[sunilsonumonu12]

Problem

The word "Mirroring" on line 367 of choosing-the-state-structure.md was rendering with mismatched smart quotes (two opening quotes) instead of proper opening and closing curly quotes, while "mirroring" on line 358 rendered correctly.

Before:

• Line 358: "mirroring" ✅ (rendered correctly)
• Line 367: "Mirroring" ❌ (rendered as ""Mirroring" with double opening quotes)

Root Cause

The smart quotes typography plugin (retext-smartypants) in the docs build pipeline incorrectly converts straight quotes when a quoted word appears at the beginning of a line or after certain punctuation, treating both quotes as opening quotes instead of distinguishing between opening and closing quotes.

Solution

Replaced straight quotes " with explicit HTML entities to ensure consistent rendering:

• “ for opening quotes (")
• ” for closing quotes (")

Applied to both instances on lines 358 and 367 for consistency and to prevent future typography issues.

Testing

• ✅ Verified quotes render correctly at http://localhost:5173/learn/choosing-the-state-structure
• ✅ Both "mirroring" and "Mirroring" now display proper opening/closing curly quotes
• ✅ No other content or functionality affected

Files Changed

• src/content/learn/choosing-the-state-structure.md (2 lines modified)

Type of Change

• Bug fix (typography/rendering issue)
• New feature
• Breaking change
• Documentation update

Screenshots

After fix: Both instances now render with proper curly quotes:

• This is why "mirroring" some prop in a state variable...
• "Mirroring" props into state only makes sense when...

---

Thank you for maintaining such excellent documentation! This small fix improves the reading experience and typography consistency across the React docs.

[meta-cla]

Hi @sunilsonumonu12!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!