React Hooks

Hooks are a newer concept in React that allows you to use React features including state without creating a class. There are few built-in react hooks, but you can also create your own custom hooks. Again, you do not use hooks in classes. They are functions and must be used in React function components, not regular JavaScript functions. Hooks should only be called at the top level and not inside nested functions, conditions, or loops. Hooks are called in the same order every time a component renders.

UseState is a built-in hook that allows us to add local state to a function component. It returns the current state value, which can then be updated throughout. You can use the state hook more than once within a component.

The useEffect is another built-in hook and lets you add side effects to a function component. This is compared to the componentDidMount or componentDidUpdate used in React classes. The useEffect hook tells React that something needs to happen in your component after the render. The effect hook accesses the state variable from the effect. The useEffect hook with run after every render.

Other Built-in Hooks

The useRef hook is another built-in hook that allows us access to any DOM element. The useReducer hook allows us to use Redux to handle complex calculations without installing the redux library.

You can also create your own custom react hooks and use them with the built-in hooks. When you create a custom hook, it is best to always create the name with the word use: for example, useCount.