| GitHub | https://github.com/pH-7 |
| YouTube | https://youtube.com/@ph7programming |
| pH7 | https://ph7.me |
To prevent the React && rendering bugs before they ship, add a lint rule and let CI enforce it.
Such as below ⬇️
// eslint.config.js
rules: {
'react/jsx-no-leaked-render': ['error', {
validStrategies: ['coerce', 'ternary']
}]
}
Push → Lint → Block unsafe JSX → Merge.
0 is falsy in JavaScript, but && returns the value itself.
React can render numbers, so 0 appears in the UI.
Safer patterns:
!!items.length && <List />
or
items.length > 0 && <List />
Tiny detail. Real UI bugs!
A small React behaviour that still catches engineers off guard.
If you write:
items.length && <List />
React may render 0 instead of nothing.
↓↓ Why? ↓↓
Start small.
One feature 🟰 One flag
Certainly, you'll never ship without them again! 🚀
■ WorkOS - manages feature flags and lets you enable features for specific users only. Great for rolling out to testers first, then gradually to everyone.
■ FeatBit - open source, self-hosted option if you want full control. Worth checking out: https://github.com/featbit/featbit
Feature flags are one of those things that separate teams that ship confidently from those that cross their fingers on every release... and freeze deployments after 4 PM and on Fridays.
Here’s how we avoid that ↓ ↓ ↓
