Custom hooks
You can also build your own hooks in React. Hooks' names should start with the use- word, and they are JavaScript functions. Custom hooks can also call other hooks. With custom hooks, you can reduce your component code complexity.
Let's go through a simple example of creating a custom hook. We will create a useTitle hook that can be used to update a document title. We will define it in its own file called useTitle.js. First, we define a function, and it gets one argument named title. The code is illustrated in the following snippet:
// useTitle.js
function useTitle(title) {
}
Next, we will use a useEffect hook to update the document title each time the title argument is changed, as follows:
import { useEffect } from 'react';
function useTitle(title) {
useEffect(() => {
document.title = title;
}, [title]);
}
export default useTitle;
Now, we can start to use our custom hook. Let's...