This content originally appeared on Bits and Pieces - Medium and was authored by FardaKarimov
Exploring some useful custom hooks in React with detailed explanations and code examples.
React is a popular JavaScript library used for building user interfaces. One of the key features of React is its ability to create reusable components. Custom hooks are a powerful feature in React that allows developers to reuse logic across multiple components. In this article, we will discuss some of the most useful custom hooks in React with detailed explanations and code examples.
useToggle
The useToggle hook is used to toggle a boolean value between true and false. It can be used in situations where we want to show or hide content based on a user’s interaction. Let’s take a look at an example of how to use the useToggle hook:
import { useState } from "react";
function useToggle(initialValue = false) {
const [value, setValue] = useState(initialValue);
const toggle = () => {
setValue(!value);
};
return [value, toggle];
}
function App() {
const [showContent, toggleContent] = useToggle(false);
return (
<div>
<button onClick={toggleContent}>Toggle Content</button>
{showContent && <p>Here's some content!</p>}
</div>
);
}In this example, we are using the useToggle hook to toggle the value of showContent between true and false when the “Toggle Content” button is clicked. The useToggle hook returns an array with two values: the current value of the boolean and a function to toggle the value.
useLocalStorage
The useLocalStorage hook is used to store and retrieve data from the browser’s local storage. This can be useful in situations where we want to persist data across page refreshes. Here’s an example of how to use the useLocalStorage hook:
import { useState } from "react";
function useLocalStorage(key, initialValue) {
const [value, setValue] = useState(() => {
const storedValue = localStorage.getItem(key);
return storedValue !== null ? JSON.parse(storedValue) : initialValue;
});
const setLocalStorageValue = (newValue) => {
setValue(newValue);
localStorage.setItem(key, JSON.stringify(newValue));
};
return [value, setLocalStorageValue];
}
function App() {
const [count, setCount] = useLocalStorage("count", 0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={incrementCount}>Increment Count</button>
</div>
);
}In this example, we are using the useLocalStorage hook to store the count value in the browser’s local storage. The count value will be retrieved from local storage on page load and updated whenever the “Increment Count” button is clicked. The useLocalStorage hook returns an array with two values: the current value of the data stored in local storage and a function to update the value.
useMediaQuery
The useMediaQuery hook is used to detect changes in the browser’s viewport size. This can be useful in situations where we want to conditionally render content based on the user’s screen size. Here’s an example of how to use the useMediaQuery hook:
function useMediaQuery(query) {
const [matches, setMatches] = useState(false)
useEffect(() => {
const mediaQuery = window.matchMedia(query)
setMatches(mediaQuery.matches)
const handleMediaQueryChange = (event) => {
setMatches(event.matches)
}
mediaQuery.addListener(handleMediaQueryChange)
return () => {
mediaQuery.removeListener(handleMediaQueryChange)
}
})
}
function App() {
const isSmallScreen = useMediaQuery("(max-width: 768px)")
return <div>{isSmallScreen ? <p>Small Screen</p> : <p>Large Screen</p>}</div>
}In this example, we are using the useMediaQuery hook to detect changes in the viewport size and conditionally render content based on whether the screen is considered small or large. The useMediaQuery hook returns a boolean value indicating whether the query matches the current viewport size.
useDebounce
The useDebounce hook is used to delay the execution of a function until a specified amount of time has passed since the last invocation of the function. This can be useful in situations where we want to limit the number of times a function is called, such as when handling user input. Here’s an example of how to use the useDebounce hook:
import { useState, useEffect } from "react"
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value)
useEffect(() => {
const timeoutId = setTimeout(() => {
setDebouncedValue(value)
}, delay)
return () => {
clearTimeout(timeoutId)
}
}, [value, delay])
return debouncedValue
}
function App() {
const [searchTerm, setSearchTerm] = useState("")
const debouncedSearchTerm = useDebounce(searchTerm, 500)
const handleSearchTermChange = (event) => {
setSearchTerm(event.target.value)
}
return (
<div>
<input type="text" value={searchTerm} onChange={handleSearchTermChange} />
<p>Debounced Search Term: {debouncedSearchTerm}</p>
</div>
)
}In this example, we are using the useDebounce hook to delay the execution of the handleSearchTermChange function until 500ms have passed since the last invocation. The useDebounce hook returns the debounced value of the input, which will only be updated after the specified delay has passed since the last change.
💡 Pro Tip: You could use an open-source toolchain such as Bit to publish, version, and reuse these custom hooks across all of your projects with a simple npm i @bit/your-username/use-localstorage.
Learn more here:
How to reuse React components across your projects
Conclusion
Custom hooks are a powerful feature in React that allows developers to reuse logic across multiple components. In this article, we discussed some of the most useful custom hooks in React, including useToggle, useLocalStorage, useMediaQuery, and useDebounce. By using these custom hooks, developers can write more efficient and maintainable code, while reducing the amount of code duplication in their projects.
Build React Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more:
- Creating a Developer Website with Bit components
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
- How to Reuse and Share React Components in 2023: A Step-by-Step Guide
4 Useful Custom Hooks to Supercharge Your React Development was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by FardaKarimov
FardaKarimov | Sciencx (2023-04-27T02:01:27+00:00) 4 Useful Custom Hooks to Supercharge Your React Development. Retrieved from https://www.scien.cx/2023/04/27/4-useful-custom-hooks-to-supercharge-your-react-development/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.