Skip to main content Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/pluginagentmarketplace/custom-plugin-react --skill react-hooks-patternsO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... Ocupações relacionadas SOC
Baseado na classificação ocupacional SOC
Explorador de arquivos
4 arquivos 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
