How can I implement React's lifecycle methods using hooks?
If you're transitioning from class components to functional components, you can replicate the behavior of lifecycle methods using hooks.
React Snippets
The React snippet collection contains function components and reusable hooks for React 18.
-
React · -
React · React useInterval hook
Wrapping your mind around React hooks and how they interact with
setInterval()can be difficult. Here's a guide to get you started. -
React · Writing readable reducers in Redux
When working with stateful code, you can run into issues realted to complexity and readability. Oftentimes, they are easily fixable.
-
React · Breaking React - a common pattern to avoid
As powerful as React is, it is also quite fragile at places. Did you know that a few lines can easily break your entire React application?
-
React · Toggle component
Render a simple toggle component in React.
-
React · Force a React component to re-render
Ever wanted to force update a React component? Here's a custom hook that does just that.
-
React · React useIntersectionObserver hook
Observe visibility changes for a given element, using the
IntersectionObserverAPI. -
React · React usePortal hook
Create a portal, allowing rendering of children outside the parent component, with this custom hook.
-
React · An approach to testing stateful React components
Testing stateful React components is not difficult, but did you know there's a solution that doesn't involve testing state directly?
-
React · Testing Redux-connected components with React Testing Library
Testing Redux-connected components is pretty common. Learn how to use this simple utility function to speed up your testing.
-
React · Automatic text linking in React
Ever wondered how to detect links in plaintext strings and make them clickable? A little ingenuity combined with React can get you there.
-
React · React conditional className, empty strings and null
In React components, you might need to conditionally apply a
className. Learn how to handle empty values correctly using this handy tip. -
React · React useTimeout hook
Implement
setTimeout()in a declarative manner, using a custom hook. -
React · Countdown timer
Create a countdown timer that prints a message when it reaches zero, using React.
-
React · How can I use a React hook to change the title of a page?
Ever wanted to change the title of a page in a React app? You can create a custom hook to do just that.
-
React · React useError hook
Use this little trick to create an error dispatcher in React.
-
React · Show/hide password toggle component
Ever wanted to show the password the user is typing? Here's how you can create a password input field with a reveal button in React.
-
React · React useEffectOnce hook
Run a callback at most once when a condition becomes true, using a custom React hook.
-
React · Email and callable telephone links
Render links formatted to send an email (
mailto:link) or call a phone number (tel:link). -
React · Prefer primitives in useEffect dependencies
Avoid unnecessary re-runs by using primitive dependencies in your React effect.
-
React · Testing React portals
Testing React components that use portals can be difficult until you understand what you really need to be testing.
-
React · Label your useState values in React developer tools
Multiple
useStatehooks in React can complicate things while debugging. Luckily, there's an easy way to label these values. -
React · React PropTypes - objectOf vs shape
Learn the differences between
PropTypes.objectOf()andPropTypes.shape()and where to use each one with this quick guide.