Skip to main content Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/pluginagentmarketplace/custom-plugin-react --skill react-hooks-patternsEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Ocupaciones relacionadas SOC
Basado en la clasificación ocupacional SOC
Explorador de archivos
4 archivos name react-hooks-patterns description Master React Hooks including useState, useEffect, useContext, useReducer, and custom hooks with production-grade patterns sasmp_version 2.0.0 bonded_agent 02-hooks-patterns bond_type PRIMARY_BOND input_validation {"required_context":[{"react_version":">=18.0.0"},{"node_version":">=18.0.0"}],"parameter_types":{"hook_name":"string","dependencies":"array"}} output_format {"code_examples":"jsx","test_template":"jest"} error_handling {"patterns":["exponential_backoff","abort_controller","cleanup_functions"],"retry_config":{"max_retries":3,"backoff_multiplier":2}} observability {"logging":"structured","metrics":["render_count","effect_duration"]}
React Hooks Patterns Skill
Overview
Master React Hooks patterns including built-in hooks (useState, useEffect, useContext, useReducer, useCallback, useMemo) and custom hook development for reusable logic.
Learning Objectives
Understand all built-in React Hooks
Create custom hooks for code reuse
Implement advanced hook patterns
Optimize performance with hooks
Handle side effects effectively
Core Hooks
useState
const [state, setState] = useState (initialValue);
const [state, setState] = useState (() => expensiveComputation ());
setState (prev =>1 );
useEffect
useEffect (() => {
const subscription = api.subscribe ();
return () => {
subscription.unsubscribe ();
};
}, [dependencies]);
useContext
const value = useContext (MyContext );
function useMyContext (const context = useContext (MyContext );
if (!context) {
throw new
Error
'useMyContext must be within Provider'
return
useReducer const [state, dispatch] = useReducer (reducer, initialState);
function reducer (state, action ) {
switch (action.type ) {
case 'INCREMENT' :
return { count : state.count + 1 };
case 'DECREMENT' :
return { count : state.count - 1 };
default :
return state;
}
}
useCallback const memoizedCallback = useCallback (
() => {
doSomething (a, b);
},
[a, b],
);
useMemo const memoizedValue = useMemo (
() => computeExpensiveValue (a, b),
[a, b]
);
useRef const ref = useRef (initialValue);
const inputRef = useRef (null );
<input ref ={inputRef} /> current .focus ();
const countRef = useRef (0 );
Custom Hooks Library
useFetch function useFetch (url ) {
const [data, setData] = useState (null );
const [loading, setLoading] = useState (true );
const [error, setError] = useState (null );
useEffect (() => {
let cancelled = false ;
fetch (url)
.then (res =>json ())
.then (data =>if (!cancelled) {
setData (data);
setLoading (false );
}
})
.catch (err =>if (!cancelled) {
setError (err);
setLoading (false );
}
});
return () => {
cancelled = true ;
};
}, [url]);
return { data, loading, error };
}
useLocalStorage function useLocalStorage (key, initialValue ) {
const [storedValue, setStoredValue] = useState (() => {
try {
const item = window .localStorage .getItem (key);
return item ? JSON .parse (item) : initialValue;
} catch (error) {
return initialValue;
}
});
const setValue = (value ) => {
try {
const valueToStore = value instanceof Function ? value (storedValue) : value;
setStoredValue (valueToStore);
window .localStorage .setItem (key, JSON .stringify (valueToStore));
} catch (error) {
console .error (error);
}
};
return [storedValue, setValue];
}
useDebounce function useDebounce (value, delay ) {
const [debouncedValue, setDebouncedValue] = useState (value);
useEffect (() => {
const handler = setTimeout (() => {
setDebouncedValue (value);
}, delay);
return () => {
clearTimeout (handler);
};
}, [value, delay]);
return debouncedValue;
}
usePrevious function usePrevious (value ) {
const ref = useRef ();
useEffect (() => {
ref.current = value;
}, [value]);
return ref.current ;
}
useToggle function useToggle (initialValue = false ) {
const [value, setValue] = useState (initialValue);
const toggle = useCallback (() => {
setValue (v =>return [value, toggle];
}
useOnClickOutside function useOnClickOutside (ref, handler ) {
useEffect (() => {
const listener = (event ) => {
if (!ref.current || ref.current .contains (event.target )) {
return ;
}
handler (event);
};
document .addEventListener ('mousedown' , listener);
document .addEventListener ('touchstart' , listener);
return () => {
document .removeEventListener ('mousedown' , listener);
document .removeEventListener ('touchstart' , listener);
};
}, [ref, handler]);
}
Practice Exercises
Counter with useReducer : Build a counter using useReducer instead of useStateTheme Context : Create a theme switcher using useContextData Fetching : Implement useFetch with cachingForm Handler : Create useForm custom hook for form state managementWindow Size Hook : Build useWindowSize hook for responsive layoutsIntersection Observer : Create useInView hook for lazy loadingTimer Hook : Build useInterval and useTimeout hooks
Common Patterns
Fetching with Abort function useFetchWithAbort (url ) {
const [state, setState] = useState ({ data : null , loading : true , error : null });
useEffect (() => {
const abortController = new AbortController ();
fetch (url, { signal : abortController.signal })
.then (res =>json ())
.then (data =>setState ({ data, loading : false , error : null }))
.catch (err =>if (err.name !== 'AbortError' ) {
setState ({ data : null , loading : false , error : err });
}
});
return () => abortController.abort ();
}, [url]);
return state;
}
Combining Multiple Hooks function useAuthenticatedApi (url ) {
const { token } = useAuth ();
const { data, loading, error } = useFetch (url, {
headers : {
Authorization : `Bearer ${token} `
}
});
return { data, loading, error };
}
Best Practices
Name custom hooks with "use" prefix Extract reusable logic into custom hooks Keep hooks at component top level (no conditionals) Use ESLint plugin for hooks rules Document custom hook dependencies Test custom hooks with @testing-library/react-hooks
Resources
Assessment
Unit Test Template
import { renderHook, act, waitFor } from '@testing-library/react' ;
import { useCustomHook } from '../useCustomHook' ;
describe ('useCustomHook' , () => {
beforeEach (() => {
jest.clearAllMocks ();
});
it ('should initialize with default state' , () => {
const { result } = renderHook (() => useCustomHook ());
expect (result.current .state ).toBe (initialValue);
});
it ('should handle async operations' , async () => {
const { result } = renderHook (() => useCustomHook ());
await act (async () => {
await result.current .asyncAction ();
});
await waitFor (() => {
expect (result.current .loading ).toBe (false );
});
});
it ('should cleanup on unmount' , () => {
const cleanup = jest.fn ();
const { unmount } = renderHook (() => useCustomHook ({ onCleanup : cleanup }));
unmount ();
expect (cleanup).toHaveBeenCalled ();
});
});
Retry Logic Pattern function useRetryAsync (asyncFn, options = {} ) {
const { maxRetries = 3 , backoff = 1000 } = options;
const [state, setState] = useState ({ data : null , error : null , loading : false });
const execute = useCallback (async (...args) => {
setState (s =>loading : true , error : null }));
let lastError;
for (let attempt = 0 ; attempt <= maxRetries; attempt++) {
try {
const data = await asyncFn (...args);
setState ({ data, error : null , loading : false });
return data;
} catch (error) {
lastError = error;
if (attempt < maxRetries) {
await new Promise (r =>setTimeout (r, backoff * Math .pow (2 , attempt)));
}
}
}
setState ({ data : null , error : lastError, loading : false });
throw lastError;
}, [asyncFn, maxRetries, backoff]);
return { ...state, execute };
}
Version : 2.0.0
Last Updated : 2025-12-30
SASMP Version : 2.0.0
Difficulty : Intermediate
Estimated Time : 2-3 weeks
Prerequisites : React Fundamentals
Changelog : Added retry patterns, test templates, and observability hooks
