Introduction to Hooks in React.js

Hooks in React are inbuilt functions that allow functional components to access and manage or mutate the state of a React Application.

The state of an Application refers to the whole dynamic data structure and properties of that application.

React Hooks is a concept that was introduced in version 16.8. Prior to this, an application's state was only accessible by class components.

Hooks in React generally follow these three rules.

• Hooks can only be called inside a functional component. Class components doesn't support hooks
• Hooks can only be called at the top level of a component ie above the return code block
• Hooks cannot be conditional and the cannot be placed inside logical code blocks.

This article is only an introduction to my Understanding Hooks in React Series.

In this series, I'll be walking you through the some essential hooks in React. Including:

1. useState Hook
2. useReducer Hook
3. useEffect Hook
4. useRef Hook
5. useLayoutEffect Hook
6. useMemo Hook