9494## Critical Bug Prevention Patterns
9595
9696### Memory Management
97-
9897- ** ALWAYS** dispose Monaco Editor instances: ` return () => editor.dispose(); ` in useEffect
9998- ** NEVER** allow memory leaks in long-running components
10099- Clear timeouts and intervals in cleanup functions
101100
102101### React Performance (MANDATORY)
103-
104102- ** ALWAYS** use ` useMemo ` for expensive computations and object/array creation
105103- ** ALWAYS** use ` useCallback ` for functions passed to dependencies
106104- ** ALWAYS** memoize table columns, filtered data, and computed values
@@ -109,19 +107,18 @@ src/
109107
110108``` typescript
111109// ✅ REQUIRED patterns
112- const displaySegments = useMemo (() => segments .filter ((segment ) => segment .visible ), [segments ]);
110+ const displaySegments = useMemo (() =>
111+ segments .filter (segment => segment .visible ), [segments ]
112+ );
113113const handleClick = useCallback (() => {
114114 // logic
115115}, [dependency ]);
116116
117117// ✅ PREFER direct callbacks over useEffect
118- const handleInputChange = useCallback (
119- (value : string ) => {
120- setSearchTerm (value );
121- onSearchChange ?.(value );
122- },
123- [onSearchChange ],
124- );
118+ const handleInputChange = useCallback ((value : string ) => {
119+ setSearchTerm (value );
120+ onSearchChange ?.(value );
121+ }, [onSearchChange ]);
125122
126123// ❌ AVOID unnecessary useEffect
127124// useEffect(() => {
@@ -130,13 +127,11 @@ const handleInputChange = useCallback(
130127```
131128
132129### Display Safety
133-
134130- ** ALWAYS** provide fallback values: ` Number(value) || 0 `
135131- ** NEVER** allow division by zero: ` capacity > 0 ? value/capacity : 0 `
136132- ** ALWAYS** handle null/undefined data gracefully
137133
138134### Security & Input Validation
139-
140135- ** NEVER** expose authentication tokens in logs or console output
141136- ** ALWAYS** validate user input before processing
142137- ** NEVER** skip error handling for async operations
@@ -276,17 +271,19 @@ Uses React Router v5 hooks (`useHistory`, `useParams`, etc.). Always validate ro
276271
277272``` typescript
278273// ✅ PREFERRED pattern for URL parameters
279- const sortColumnSchema = z .enum ([' column1' , ' column2' , ' column3' ]).catch (' column1' );
274+ const sortColumnSchema = z
275+ .enum ([' column1' , ' column2' , ' column3' ])
276+ .catch (' column1' );
280277
281278const SortOrderParam: QueryParamConfig <SortOrder []> = {
282- encode : (value ) => ( value ? encodeURIComponent (JSON .stringify (value )) : undefined ) ,
283- decode : (value ) => {
284- try {
285- return value ? JSON .parse (decodeURIComponent (value )) : [];
286- } catch {
287- return [];
288- }
289- },
279+ encode : (value ) => value ? encodeURIComponent (JSON .stringify (value )) : undefined ,
280+ decode : (value ) => {
281+ try {
282+ return value ? JSON .parse (decodeURIComponent (value )) : [];
283+ } catch {
284+ return [];
285+ }
286+ },
290287};
291288
292289const [urlParam, setUrlParam] = useQueryParam (' sort' , SortOrderParam );
0 commit comments