In React.js, there are several methods available for managing components, handling lifecycle events, and working with hooks. Below, I've categorized the most important methods into different sections:
1. Component Lifecycle Methods (Class Components)
In React class components, there are several lifecycle methods that you can override to run code at specific times in a component's life cycle:
Mounting Phase (initializing a component)
-
constructor()
- Called before the component is mounted.
- Useful for initializing state or binding event handlers.
-
static getDerivedStateFromProps(props, state)
- Called before rendering, both on the initial mount and on subsequent updates.
- Allows the state to be updated based on props.
-
render()
- The only required method in a class component.
- Should return React elements, which will be rendered to the DOM.
-
componentDidMount()
- Called immediately after a component is mounted.
- Commonly used for fetching data, setting up subscriptions, or making API calls.
Updating Phase (re-rendering due to changes in props or state)
-
static getDerivedStateFromProps(props, state)
- (Also called during updates) Used to update state based on props.
-
shouldComponentUpdate(nextProps, nextState)
- Determines if a re-render is necessary.
- Can be used to optimize performance by preventing unnecessary renders.
-
render()
- (Called again during updates)
-
getSnapshotBeforeUpdate(prevProps, prevState)
- Called right before changes from the virtual DOM are applied to the actual DOM.
- Useful for capturing information (like scroll position) before updates.
-
componentDidUpdate(prevProps, prevState, snapshot)
- Called immediately after updating occurs.
- Useful for performing operations after the component has been updated (e.g., making API calls based on prop changes).
Unmounting Phase (cleaning up before a component is removed)
-
componentWillUnmount()
- Called just before a component is unmounted and destroyed.
- Useful for cleaning up subscriptions, timers, or event listeners.
Error Handling
-
componentDidCatch(error, info)
- Called if there is an error during rendering, in a lifecycle method, or in the constructor of any child component.
- Useful for logging errors and displaying fallback UI.
2. React Hooks (Function Components)
Hooks are a new addition in React 16.8 that let you use state and other React features without writing a class.
Basic Hooks
-
useState(initialState)
- Allows you to add state to a functional component.
- Returns a state variable and a function to update it.
const [count, setCount] = useState(0);
-
useEffect(callback, dependencies)
- Similar to
componentDidMount
,componentDidUpdate
, andcomponentWillUnmount
combined. - Used for side effects like data fetching, subscriptions, or manually changing the DOM.
- Similar to
useEffect(() => {
// Effect logic here
return () => {
// Cleanup logic here (like componentWillUnmount)
};
}, [dependencies]);
-
useContext(Context)
- Allows you to subscribe to React context without nesting
Consumer
components.
- Allows you to subscribe to React context without nesting
const value = useContext(MyContext);
Additional Hooks
-
useReducer(reducer, initialState)
- An alternative to
useState
for managing more complex state logic.
- An alternative to
const [state, dispatch] = useReducer(reducer, initialState);
-
useCallback(callback, dependencies)
- Returns a memoized version of a callback function, useful for optimizing child components that rely on reference equality.
const memoizedCallback = useCallback(() => {
doSomething();
}, [dependencies]);
-
useMemo(create, dependencies)
- Returns a memoized value, used for optimizing expensive calculations.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
-
useRef(initialValue)
- Returns a mutable ref object, which persists between renders.
- Useful for accessing DOM elements or storing mutable values.
const inputRef = useRef();
-
useImperativeHandle(ref, createHandle, dependencies)
- Customizes the instance value that is exposed when using
ref
withforwardRef
.
- Customizes the instance value that is exposed when using
useImperativeHandle(ref, () => ({
focus: () => inputRef.current.focus()
}));
-
useLayoutEffect(callback, dependencies)
- Similar to
useEffect
, but fires synchronously after all DOM mutations. - Useful for reading layout from the DOM and synchronously re-rendering.
- Similar to
-
useDebugValue(value)
- Can be used to display a label in React DevTools for custom hooks.
useDebugValue(isOnline ? 'Online' : 'Offline');
3. Event Handling Methods
React provides methods for handling events, similar to regular DOM event handling, but with some differences:
onClick
onChange
onSubmit
onFocus
onBlur
onKeyPress
Example:
function handleClick() {
console.log('Button clicked');
}
<button onClick={handleClick}>Click Me</button>;
4. Other React Methods
These are additional methods you may find useful:
-
React.createRef()
- Used to create refs in class components.
-
React.forwardRef()
- Pass refs to child components.
-
React.memo(Component)
- A higher-order component that prevents re-rendering if props haven't changed.
-
React.lazy()
- Used for code-splitting and lazy loading components.
-
React.Suspense
- Used in combination with
React.lazy()
to show a fallback while loading a lazy component.
- Used in combination with
5. React Router Methods (for Routing)
-
useNavigate()
(React Router v6) useParams()
useLocation()
useMatch()
Example:
const navigate = useNavigate();
navigate('/path');
6. Prop Types and Default Props
-
propTypes
- Used to validate the type of props passed to a component.
-
defaultProps
- Used to set default values for props.
Example:
MyComponent.propTypes = {
name: PropTypes.string,
};
MyComponent.defaultProps = {
name: 'Guest',
};
Conclusion
- Class components are more traditional and use lifecycle methods.
- Functional components leverage hooks and are generally preferred in modern React development due to their simplicity and performance benefits.
Use class components when you need fine-grained control over component lifecycle and hooks when you want a simpler and cleaner API.
Top comments (0)