| name | react |
| description | Use this skill when writing any React code. This skill details best practices,
component design, composition, and hook gotchas.
|
React
useRef
The ONLY acceptable use for a useRef is to capture a native component using
ref={myRef}. In order to track state between calls, a useState, useMemo, and
useEffect ensures proper rerenders happen. useRef is too brittle for state
management.
JSX
JSX should be SIMPLE. At most, conditional rendering is allowed with a single
variable comparison. Complex conditionals should be stored in a well-named
variable before the JSX renders and referenced. Ternaries in JSX are allowed,
but they must render only two paths. Nested Ternaries are too complex, and
should instead be broken out into a separate component in the components
directory.
One Component per File
Only ONE component definition is allowed per file. Components should be reusable
and have their own FOLDER in the src/components/<ComponentName> folder with a
barrel file.
Sometimes, you have a tightly coupled component that the Component needs. Instead
of polluting the src/components folder with a bunch of really small tightly
coupled components (think: like a row definition component for a specific
table), you can make a "private" component file in the
src/components/<ComponentName>/_MyPrivateComponent.tsx. This honors the
One Component per File rule while also keeping the main component file clean and
easy to manage.
useMemo
ANY new array or object definition that is used in JSX MUST be wrapped in a
useMemo with ALL dependencies in the dependency array.
This ensures there are no rerender loops or stale data references. React has a
very good state management and rerender system. Use it and let React be smart
about ensuring good render performance.
useCallback
ALL functions used in JSX MUST be wrapped in a useCallback with ALL dependencies
in the dependency array.
This ensures that there are no stale references in the callback (a very difficult
to debug error)
