fix: avoid ref lint failures in create-rspeedy flappy templates

[upupming]

Summary

Fix CI error: https://github.com/lynx-family/lynx-stack/actions/runs/23188569941/job/67379679533?pr=2343

> eslint .

/tmp/tmp.tGIyDBInzU/create-rspeedy-regression/src/useFlappy.ts
  31:8  error  Error: Cannot access refs during render

React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).

/tmp/tmp.tGIyDBInzU/create-rspeedy-regression/src/useFlappy.ts:31:8
  29 |   const engineRef = useRef<FlappyEngine | null>(null)
  30 |
> 31 |   if (!engineRef.current) {
     |        ^^^^^^^^^^^^^^^^^ Cannot access ref value during render
  32 |     engineRef.current = createFlappy((newY) => {
  33 |       setY(newY)
  34 |     }, options)

To initialize a ref only once, check that the ref is null with the pattern `if (ref.current == null) { ref.current = ... }`  react-hooks/refs

✖ 1 problem (1 error, 0 warnings)

• update the create-rspeedy flappy templates to initialize the engine ref with engineRef.current == null
• avoid the react-hooks/refs CI failure in scaffolded apps generated from the React templates
• keep the lazy one-time ref initialization pattern that React's refs lint explicitly allows, instead of changing the hook lifecycle behavior
• update the vitest template snapshots for the normalized inline style output

Checklist

• Tests updated (or not required).
• Documentation updated (or not required).
• Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

Summary by CodeRabbit

• Refactor

  • Enhanced engine initialization with explicit null and undefined checks across template files, improving code robustness and preventing edge case issues.

• Tests

  • Updated test snapshots to reflect formatting adjustments for consistency across test suites.

[changeset-bot]

🦋 Changeset detected

Latest commit: 48e8fe7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ba7831a1-8db2-4841-a844-b99b3439f53d

📥 Commits

Reviewing files that changed from the base of the PR and between 08b1e51 and 48e8fe7.

📒 Files selected for processing (1)

• .changeset/petite-jeans-cut.md

✅ Files skipped from review due to trivial changes (1)

• .changeset/petite-jeans-cut.md

---

📝 Walkthrough

Walkthrough

This pull request standardizes engine reference initialization across multiple template files by replacing falsy checks with explicit null/undefined checks in useFlappy hooks. Additionally, it includes minor test snapshot formatting adjustments and a new changeset file entry.

Changes

Cohort / File(s)	Summary
Engine Initialization Guard packages/rspeedy/create-rspeedy/template-react-js/src/useFlappy.js, template-react-ts/src/useFlappy.ts, template-react-vitest-rltl-js/src/useFlappy.js, template-react-vitest-rltl-ts/src/useFlappy.ts	Changed engine initialization condition from falsy check (!engineRef.current) to explicit null/undefined check (engineRef.current == null) across all template variants.
Test Snapshot Formatting packages/rspeedy/create-rspeedy/template-react-vitest-rltl-js/src/__tests__/index.test.jsx, template-react-vitest-rltl-ts/src/__tests__/index.test.tsx	Updated inline style snapshot formatting: added space after colon and trailing semicolon in transform style value ("transform:translateY(0px)" → "transform: translateY(0px);")
Changeset .changeset/petite-jeans-cut.md	Added new empty changeset file for tracking release notes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• feat(examples): add flappy-bird hook demo to React templates #2325: Directly related to useFlappy hook logic changes in the same template files.

Suggested reviewers

• luhc228
• colinaaa

Poem

🐰 Hops with glee through template land,
Null checks now precise and grand,
Where falsy once did freely roam,
Now == null brings refs back home,
Styles formatted with care and grace! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically identifies the main change: fixing ESLint/lint failures in create-rspeedy flappy templates by updating ref initialization patterns.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/create-rspeedy-useflappy-ref-init

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

❌ Patch coverage is 0% with 4 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
.../create-rspeedy/template-react-js/src/useFlappy.js	0.00%	1 Missing ⚠️
.../create-rspeedy/template-react-ts/src/useFlappy.ts	0.00%	1 Missing ⚠️
...edy/template-react-vitest-rltl-js/src/useFlappy.js	0.00%	1 Missing ⚠️
...edy/template-react-vitest-rltl-ts/src/useFlappy.ts	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[codspeed-hq]

Merging this PR will degrade performance by 7.89%

❌ 2 regressed benchmarks
✅ 70 untouched benchmarks
⏩ 3 skipped benchmarks¹

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
❌	basic-performance-scroll-view-100	8.7 ms	9.2 ms	-5.82%
❌	basic-performance-nest-level-100	7.2 ms	7.8 ms	-7.89%

---

_{Comparing codex/create-rspeedy-useflappy-ref-init (48e8fe7) with main (2efecc2)}

Footnotes

1. 3 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[relativeci]

Web Explorer

#8199 Bundle Size — 385.21KiB (0%).

48e8fe7(current) vs 2efecc2 main#8186(baseline)

Bundle metrics   1 change

	Current #8199	Baseline #8186
Initial JS	155.59KiB	155.59KiB
Initial CSS	35.1KiB	35.1KiB
Cache Invalidation	0%	23.27%
Chunks	8	8
Assets	8	8
Modules	239(+0.84%)	237
Duplicate Modules	16	16
Duplicate Code	2.97%	2.97%
Packages	4	4
Duplicate Packages	0	0

Bundle size by type  no changes

	Current #8199	Baseline #8186
JS	254.26KiB	254.26KiB
Other	95.85KiB	95.85KiB
CSS	35.1KiB	35.1KiB

Bundle analysis report Branch codex/create-rspeedy-useflappy-r... Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}