React Hooks were introduced in React 16.8 to provide functional components with features previously exclusive to class components, such as state and lifecycle methods. Hooks allow for cleaner, more modular code, making it easier to share logic across components without relying on higher-order components or render props.
Basic Hooks
useState
useState is a Hook that allows you to add state to functional components. It returns a state variable and a function to update it.
Example:
`import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
You clicked {count} times
setCount(count + 1)}>Click me
);
}
export default Counter;`
useEffect
useEffect is a Hook for performing side effects in functional components, such as fetching data, directly updating the DOM, and setting up subscriptions. It runs after the render by default.
Example:
`import React, { useState, useEffect } from 'react';
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setCount(count + 1);
}, 1000);
return () => clearInterval(interval); // Cleanup on unmount
}, [count]); // Dependency array
return
{count};}
export default Timer;`
Advanced Hooks
useContext
useContext allows you to consume context in a functional component, providing a way to share values like themes or authenticated users across the component tree without prop drilling.
Example:
`import React, { useContext, createContext } from 'react';
const ThemeContext = createContext('light');
function ThemedButton() {
const theme = useContext(ThemeContext);
return I am a {theme} button;
}
function App() {
return (
);
}
export default App;`
useReducer
useReducer is used for state management in more complex scenarios, similar to Redux. It is useful for managing state transitions.
Example:
`import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
Count: {state.count}
dispatch({ type: 'increment' })}>+
dispatch({ type: 'decrement' })}>-
);
}
export default Counter;`
useRef
useRef returns a mutable ref object whose .current property is initialized to the passed argument. It can persist across renders.
Example:
`import React, { useRef } from 'react';
function TextInput() {
const inputEl = useRef(null);
const handleClick = () => {
inputEl.current.focus();
};
return (
Focus the input
);
}
export default TextInput;`
useMemo
useMemo is used to memoize expensive calculations, returning a memoized value only if the dependencies have changed.
Example:
`import React, { useState, useMemo } from 'react';
function ExpensiveCalculationComponent({ num }) {
const calculate = (num) => {
console.log('Calculating...');
return num * 2;
};
const memoizedValue = useMemo(() => calculate(num), [num]);
return
The result is: {memoizedValue};}
function App() {
const [num, setNum] = useState(1);
return (
setNum(e.target.value)} />
);
}
export default App;`
useCallback
useCallback returns a memoized callback function that only changes if one of the dependencies changes. It is useful for preventing unnecessary re-renders of child components.
Example:
`import React, { useState, useCallback } from 'react';
function Button({ handleClick }) {
return Click me;
}
function App() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
Count: {count}
);
}
export default App;`
Custom Hooks
Custom Hooks are JavaScript functions that start with "use" and can call other Hooks. They enable the reuse of stateful logic between components.
Example:
`import React, { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
async function fetchData() {
const response = await fetch(url);
const result = await response.json();
setData(result);
setLoading(false);
}
fetchData();
}, [url]);
return { data, loading };
}
function DataComponent({ url }) {
const { data, loading } = useFetch(url);
if (loading) return
Loading...;return {JSON.stringify(data)};
}
function App() {
return ;
}
export default App;
`Conclusion
React Hooks provide a powerful and flexible way to manage state and side effects in functional components. By understanding and leveraging the various hooks, such as useState, useEffect, useContext, useReducer, useRef, useMemo, and useCallback, as well as creating custom hooks, React developers can write cleaner, more maintainable code. This approach fosters better code reuse and simplifies complex component logic, enhancing the overall development experience.
Top comments (0)