Insights & practice
Modern React Patterns: Hooks and Performance
Evolution of React React has evolved with hooks, context, and advanced patterns for cleaner code. Custom Hooks function useLocalStorage (key: string, initialValue: T) { const [value,…
ReactHooksPerformanceTypeScript
B
belhachemi_admin
5 min read
DiscussSave
Evolution of React
React has evolved with hooks, context, and advanced patterns for cleaner code.
Custom Hooks
function useLocalStorage(key: string, initialValue: T) {
const [value, setValue] = useState(() => {
const item = localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
});
const setStoredValue = (newValue: T) => {
setValue(newValue);
localStorage.setItem(key, JSON.stringify(newValue));
};
return [value, setStoredValue];
} Context API
const AuthContext = createContext(null);
export function AuthProvider({ children }) {
const [user, setUser] = useState(null);
return (
{children}
);
}Performance
Use useMemo, useCallback, and React.memo for optimization.
Responses
Start the conversation