Summer’s over — what’s your move? Join Pro for 50% off using code [MAKEITHAPPEN](https://www.codecademy.com/checkout?periods=year&plan_id=proGoldAnnualV2&discountCode=MAKEITHAPPEN)


This lesson covers what custom hooks are and how to use them in your React application!

Custom Hooks

Now it's time to create our own custom hook! We'll do so by creating a hook that uses the web browser's [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API). The Geolocation API allows us to get a user's coordinates, enabling us to provide a custom experience to users based on their location. Let's see how this API works before we use it.

The API is readily available by using the `window.navigator.geolocation` object (you can omit the `window` part). The API provides specific functions to either get the current position of a device (`.getCurrentPosition()`) or to continuously watch a device's position (`.watchPosition()`).

When using either of these functions, passing a `success` callback function is required. This callback will be executed on successful execution of the Geolocation API and will be passed a `position` object containing the `.coords` property — the coordinates of the user's device.

```js
navigator.geolocation.getCurrentPosition((pos) => {
  console.log(‘Current Location’, pos.coords) // ← logs the current position of the device
})
```

Optionally an `error` callback function can be passed as the second argument, that will be executed if the API call fails. 

```js
function success() {
  console.log(‘Current Location’, pos.coords); // ← logs the current position of the device
};
function fail(error) {
  console.log('Uh oh something went wrong', error); // ← executes if the API failed
}
navigator.geolocation.watchPosition(success, fail);
```

Now that we have gone over the basics of the Geolocation API, let’s use what we have learned and make a reusable custom hook! 

Head over to the code editor. In the `components` folder there are two component files to look at: `HemisphereDisplay.js` and `LongitudeLatitudeDisplay.js`. In each, you will find there is a variable `currentLocation` that each component expects to be the current coordinate position of the user. Currently the value is hard-coded to be `null`.

To make our application work properly, we will create a custom hook that will: 
1. Manage location state with `useState()`
2. Use an effect to fetch the current location of the device with `useEffect()`
3. Return the location to the user of the hook

Let's get started!

Create Your Own Custom Hook

Custom hooks are JavaScript functions that use other hooks. They help share stateful logic that we may otherwise need to reuse throughout our application. For example, we may create custom hooks for commonly used effects such as form handling, animations, timers, etc.

As a convention, custom hooks should have names that start with `use`. Additionally, they should also follow the rules of hooks. Otherwise, they don't need to have a specific design — the developer gets to decide what arguments it takes, and if it should return anything. Consider this example `useToggle()`:

```js
// useToggle.js
export const useToggle = (initialState = false) => {
  // Use the `initialState` argument to initialize the state
  const [state, setState] = useState(initialState);

  // Perform an animation each time the state changes
  useEffect(() => {
    performToggleAnimation(state);
  }, [state])

  // Create an easy-to-use toggle function
  const toggle = () => { setState(state => !state) }

  // Return the state value and the toggle function
  return [state, toggle]
}
```

In this example, we create a custom hook called `useToggle()` that:
* uses `useState()` to manage a toggle state value
* uses `useEffect` to run a toggling animation effect 
* creates a `toggle()` function to interact with the `setState()` function

We can imagine this toggling feature being used in many places in our application. Instead of copy-pasting all of this logic each time we want to use it, we can just import and use `useToggle()`!

```js
import { useToggle } from './useToggle';
const DarkMode = () => {
  // Get the state and toggle function from useToggle()
  // We'll use an initial value of true
  const [state, toggle] = useToggle(true);
  return (
    <button onClick={toggle}> 
      {state ? 'On' : 'Off'}
    </button>
  )
}
```

In this example, we create a `DarkMode` component using the `useToggle()` custom hook. `useToggle()` returns the toggle's `state` value and a `toggle()` function for switching the toggle. Now, `DarkMode` can use these values, and the underlying logic that supports them, without having to write out all of the code again!

Custom hooks present a number of advantages when used properly in an application:
* They allow us to abstract our code, hide complex logic, as well as share stateful logic between multiple components. 
* When using a custom hook in two or more components, all state and effects inside are fully isolated. This is true of `useState()` and `useEffect()` as well! This means that any data from one component won't “bleed over” into another.
* By creating a separate file from which we export the custom hook, we can import it into any part of our application.

When used effectively, custom hooks make our code more reusable, readable, and faster to develop!


Before we get into creating custom hooks, let's review what we know about the `useEffect()` hook. 

The `useEffect()` hook allows developers to perform an action after rendering. These actions are typically side effects of the component rendering and are often reactions to state changes. A common example of one of these "side effects" is fetching data after the component renders.

Remember, `useEffect()` accepts two arguments:
1. A callback function which is executed after the component renders
2. A dependency array which determines how often the effect is executed

```js
useEffect(() => {
  fetchData('someapi.com/key/123');
}, []); // ← An empty dependency array
```

When we pass an empty dependency array as the second argument to our effect hook, the callback will only be executed after the component's first render. In this example, we only want to fetch data once after the first render.

When variables are provided in the dependency array, React will only execute the callback passed to `useEffect()` when those variables are updated.

```js
const [searchQuery, setSearchQuery] = useState('');

useEffect(() => {
  fetchData(`someapi.com/search?q=${searchQuery}`);
}, [searchQuery]); // ← A single dependency 
```

In this example, we'll fetch new data only when the `searchQuery` value changes. In this way, the dependency array allows us to achieve the right balance between making too many API calls and serving the most up-to-date data with our users.

 Reviewing Effect Hooks 

Congrats on finishing the Custom Hooks lesson! In this lesson, we reviewed how the `useState()` and the `useEffect()` hooks work. We have also covered the rules that hooks are governed by. The rules of hooks apply to both built-in hooks as well as any custom hooks that we create. 

Custom hooks are JavaScript functions that make use of other hooks. Their names all begin with `use` but otherwise can be designed as the developer sees fit. Custom hooks are useful for encapsulating complex and repetitive hook logic and are often created in their own file and exported for maximum portability. 

 Review

At this point in your React journey, you should be familiar with the basics of React hooks. Remember, hooks allow us to perform essential logic with our function components. These actions include managing state with `useState()` and executing code after a render with `useEffect()`. In this lesson, we are going to build on these basic hooks and learn how to create our own **custom hooks**!

Custom hooks are functions that encapsulate logic using other React hooks. They behave just like hooks built into `React`, but they allow us to combine and reuse them to reduce logic complexity and repetition. Custom hooks aren't a new feature of React — they are a convention used widely in the React world. By learning this convention, you can join your fellow React developers in creating and using custom hooks!

Along the way to creating our own custom hooks, we will practice and review some basic concepts about hooks. Specifically, we'll review how effect hooks work under the hood as well as the rules that all hooks must follow. With these skills, we can begin creating our own custom hooks. Let's get started!


Introduction to Advanced Hooks

Before we can build our own custom hooks, we should review the **rules of hooks**. These rules apply to React's built-in hooks, like `useState()` and `useEffect()`, as well as any custom hooks that we create. Let's review.

**Rule #1: Only call hooks from React function components.** We cannot use hooks in class components since hooks aren't supported. We also cannot use hooks in regular JavaScript functions. This is solely for the purpose of code maintainability. By following this rule, we can easily separate our hook-based logic from the rest of our application's logic. 

**Rule #2: Only call Hooks at the top level of your function components. Do not call them within other functions, conditionals, or loop blocks.** This one has to do with making sure that our hooks are called every time, and in the same order, each time a component re-renders. 

As users interact with the application and the application re-renders, React calls all of the functions that are defined inside our components on each new render, including our hooks. So, how can React keep track of the `useState()` or `useEffect()` calls that are made between renders? 

React keeps track of the data and callback functions that are managed with hooks based on their order in the component's definition. If we run our hooks only during some re-renders and not others, this order will get jumbled causing unexpected results.
 
For example, if we were to put a `useEffect()` call inside an `if` statement:
```js
const [searchQuery, setSearchQuery] = useState('');

if (!searchQuery) {
  useEffect(() => {
    fetchData(`someapi.com/search?q=${searchQuery}`);
  }, [searchQuery]);
}
```

... then the component would call `useState()` every time but would only sometimes call `useEffect()`. If we were to use this hook in our application, we might run into the following error:

```
Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
```

Instead, we can accomplish the same goal while consistently calling our hook every time:

```js
const [searchQuery, setSearchQuery] = useState('');
useEffect(() => {
  if (!searchQuery) {
    fetchData(`someapi.com/search?q=${searchQuery}`);
  }
}, [searchQuery]);
```

By following this rule, we can ensure that our hooks are called in the same order and on every render.

> Note: Be careful not to confuse executing a _hook_ on every render with executing the _callback_ passed to it on every render. `useEffect()` callbacks may not be called on every render depending on the dependency array values. However, the `useEffect()` hook itself must be called on every render.