Functional React components use hooks to provide various capabilities in React applications. There are many hooks we can use and the list continues to grow. Some of these hooks are native React hooks and some are available as third party libraries that we can easily import into our React applications. These five hooks are required to make enterprise grade React applications. useState UseState is a native React hook and is essential for all React applications. This hook is used to store state (data) for a React component. When the state of a component changes, React “reacts” to this change and re-renders the component. UseState is a staple hook that every React developer must know how to use. useRef UseRef is a native React hook that has two use cases. First, it can provide a reference (handle) to an HTML element. This is useful when we need to access certain properties or functionality from that element, for example clearing the text from an input textbox. Second, useRef can be used to create variables local to a React component. Changes to useRef variables do not force the component to re-render. UseRef variables feel like private instance variables found in OOP languages. useEffect UseEffect is a native React hook that eliminates the need for lifecycle methods like those found in React class based components. The UseEffect hook uses a dependency array to determine if it should get invoked. If anything listed in the dependency array changes, React fires the useEffect hook. An empty dependency array indicates that the useEffect hook only gets fired when the component loads into the DOM for the first time only. UseEffect is useful when you find yourself asking the question, “I want this to happen when that happens.” useQuery UseQuery is a third party hook made available to us from the React-Query library (npm install react-query). UseQuery is useful for making and caching web API calls. Data returned from web API calls are cached in collections with a name (key) that you specify. The cache is checked when subsequent calls to the same API endpoint are made. UseQuery has the added benefit of sharing this data among multiple React components, which makes this a valuable tool for sharing server side data across your application. The scope of the data sharing can be controlled by wrapping the target components in a QueryClientProvider block. useRecoilState UseRecoilState is another third party hook from the Recoil library (npm install recoil). It works similar to useState but differs with respect to scope. The useState hook can only be used to store state internally to a single React component, but useRecoilState can be used to share state across multiple React components. Because of this expanded scope, Recoil is known as a global state management tool. There are many global state management tools, but I find that Recoil is the easiest because it closely resembles the useState hook. The scope of the data sharing can be controlled by wrapping the target components in a RecoilRoot block. Because global variables are generally considered bad, we can restrict which components have read and write access using a related hook called useRecoilValue. This hook only allows read only access to the shared state, thus tightening the control of our variables and improving the overall quality of our software solution.