Rules Hub
Coding Rules Library
Prefer null over sentinel values for missing state
Use null or undefined to explicitly represent missing data instead of magic strings to simplify truthiness checks and avoid ambiguity.
Bad example
| 1 | const [link, setLink] = useState('#'); // '#' represents 'no link' |
| 2 |
|
| 3 | return ( |
| 4 | <div> |
| 5 | {link !== '#' ? ( |
| 6 | <a href={link}>Go</a> |
| 7 | ) : ( |
| 8 | <span>No link available</span> |
| 9 | )} |
| 10 | </div> |
| 11 | ); |
Explanation (EN)
Using a magic string like '#' to represent the absence of a value is brittle and requires verbose checks (`!== '#'`). It confuses valid data with placeholder values.
Objašnjenje (HR)
Korištenje 'magic string' vrijednosti poput '#' za označavanje nedostatka podataka je krhko i zahtijeva nepotrebne provjere (`!== '#'`). To stvara zbrku između stvarnih podataka i rezerviranih mjesta.
Good example
| 1 | const [link, setLink] = useState<string | null>(null); |
| 2 |
|
| 3 | return ( |
| 4 | <div> |
| 5 | {link ? ( |
| 6 | <a href={link}>Go</a> |
| 7 | ) : ( |
| 8 | <span>No link available</span> |
| 9 | )} |
| 10 | </div> |
| 11 | ); |
Explanation (EN)
Using `null` allows for native truthiness checks (`if (link)`), clearly signals absence, and eliminates the need for arbitrary magic strings.
Objašnjenje (HR)
Korištenje `null` vrijednosti omogućuje prirodne provjere istinitosti (`if (link)`), jasno signalizira nedostatak vrijednosti i uklanja potrebu za nasumičnim 'magic string' vrijednostima.