@@ -12,7 +12,6 @@ Thank you for your interest in contributing to the OpenShift Monitoring Plugin!
1212- [ Code Conventions] ( #code-conventions )
1313 - [ Naming Conventions] ( #naming-conventions )
1414 - [ React Component Patterns] ( #react-component-patterns )
15- - [ State Management] ( #state-management )
1615 - [ TypeScript Best Practices] ( #typescript-best-practices )
1716 - [ Go Backend Guidelines] ( #go-backend-guidelines )
1817- [ Testing Requirements] ( #testing-requirements )
@@ -278,52 +277,6 @@ export const ErrorAlert: FC<ErrorAlertProps> = ({ error }) => {
278277};
279278```
280279
281- #### Memoization
282-
283- Use ` memo ` for components that receive stable props and render frequently:
284-
285- ``` typescript
286- // ✅ Good: Memoized component with named export
287- import { memo } from " react" ;
288-
289- export const Health: FC <{ health: " up" | " down" }> = memo (({ health }) => {
290- return health === " up" ? (
291- < GreenCheckCircleIcon / >
292- ) : (
293- < RedExclamationCircleIcon / >
294- );
295- });
296- ```
297-
298- Use ` useMemo ` for expensive computations:
299-
300- ``` typescript
301- // ✅ Good: Memoized computation
302- const additionalAlertSourceLabels = useMemo (
303- () => getAdditionalSources (alerts , alertSource ),
304- [alerts ]
305- );
306-
307- // Avoid creating new arrays on every render
308- const queriesMemoKey = JSON .stringify (_ .map (queries , " query" ));
309- const queryStrings = useMemo (() => _ .map (queries , " query" ), [queriesMemoKey ]);
310- ```
311-
312- Use ` useCallback ` for event handlers passed to child components:
313-
314- ``` typescript
315- // ✅ Good: Memoized callbacks
316- const toggleIsEnabled = useCallback (
317- () => dispatch (queryBrowserToggleIsEnabled (index )),
318- [dispatch , index ]
319- );
320-
321- const doDelete = useCallback (() => {
322- dispatch (queryBrowserDeleteQuery (index ));
323- focusedQuery = undefined ;
324- }, [dispatch , index ]);
325- ```
326-
327280#### Translations (i18n)
328281
329282Always use the ` useTranslation ` hook for user-facing strings, this allows the translation
@@ -345,39 +298,6 @@ export const MyComponent: FC = () => {
345298};
346299```
347300
348- ### State Management
349-
350- #### Context API
351-
352- Use React Context for sharing state across component trees:
353-
354- ``` typescript
355- // ✅ Good: Context definition
356- import React , { useMemo } from " react" ;
357-
358- type MonitoringContextType = {
359- plugin: MonitoringPlugins ;
360- prometheus: Prometheus ;
361- useAlertsTenancy: boolean ;
362- useMetricsTenancy: boolean ;
363- accessCheckLoading: boolean ;
364- };
365-
366- export const MonitoringContext = React .createContext <MonitoringContextType >({
367- plugin: " monitoring-plugin" ,
368- prometheus: " cmo" ,
369- useAlertsTenancy: false ,
370- useMetricsTenancy: false ,
371- accessCheckLoading: true ,
372- });
373-
374- // Custom hook to consume context
375- export const useMonitoring = () => {
376- const context = useContext (MonitoringContext );
377- return context ;
378- };
379- ```
380-
381301### TypeScript Best Practices
382302
383303#### Type Imports
0 commit comments