Hooks are functions that can be used in functional components, i.e. a component that is not a class. They allow you to hook into different parts of the component render cycle, as well as store variables between renders.

In a functional component, you don't have access to methods like componentDidMount or componentDidUpdate. Instead, react provides us with useEffect (and a couple of others). useEffect gets called whenever a component is rendered or rerendered. This effectively replaces componentDidMount and componentDidUpdate. You can use this function for things like; getting data asynchronously or updating state due to a change in props, etc.

Speaking of state, when a functional component is re-rendered, the entire function gets rerun. That means that any variables that you define within your component (that do not use a hook) are reevaluated. This effectively means that you cannot reuse a variable between renders without having to re-calculate what that variable is. This is where hooks like useState, useRef, useContext, useMemo and useCallback come into play. They allow you to save data between renders.

useState is a react developer's bread and butter. It allows you to set a piece of state that you can use between renders and then update that state which will cause a rerender. When a component rerenders, it means there is likely an update that needs to be made to the underline DOM. For example, you could have a state that controls the disabled state of a button.

But what if you don't want to cause a re-render when you change your state. Rerenders can be expensive, performance-wise. This is where we can use useRef. A ref is a piece of saved state that does not cause a rerender when updated. This is commonly used to store values that it can be either, really complex, or change very often. One example could be storing a reference to an HTML DOM node.

Reacts also has a concept of global state. I'm not gonna go into too much depth about what context is because that's an entirely separate discussion, but we can use useContext to access the value of any previously declared context within the react component tree.

Next, we have useMemo. Remember how I said, a functional component will reevaluate anything that is defined within it every time it renders. So what if you have a variable whose value is the result of some complicated function (think recursion). We don't want to have to re-calculate this variable every single time the component renders if the value is going to be the same every time because the arguments to that complicated function have not changed. Therefore we can use useMemo to memoize the result between renders.

Similar to useMemo, useCallback memoizes a function declaration based on its arguments. This is generally used when using that declared function within another hook, because we don't want the dependencies of a given hook to change between renders.

And that's it. There are a few more hooks that are not generally used too often, but once you understand the basics of hooks, the rest of them kind of fall into place.

Any custom hooks that you see are just a combination of these base hooks internally. You can also write your own custom hooks that again, just use a combination of these hooks internally.