Page Content:
1.hooks-introduction
2.Rules-for-hooks
3.Pre-requisites-hooks
4.Hooks-installation
5.Built-in-hooks
1.Hooks Introduction:
Q.What are hooks?
1.Hooks are the new feature introduced in the React V16.8.0 version.
2.Hooks are functions that let you “hook into” React state and lifecycle features from function components.
3.Hooks don’t work inside classes — they let you use React without classes.
Note:
Hooks are backward-compatible, which means it does not contain any breaking changes.
Also, it does not replace your knowledge of React concepts.
Q.when to use Hooks?
If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component.
2.Rules for React Hooks:
Hooks are JavaScript functions, but you need to follow two rules while using hooks.
React Creators provided a linter plugin to enforce these rules automatically:
1. Only call Hooks at the top level:
Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders.
2. Only call Hooks from React functions:
Don’t call Hooks from regular JavaScript functions. Instead, you can:
✅ Call Hooks from React function components.
✅ Call Hooks from custom Hooks.
3.Pre-requisites for React Hooks:
1.Node version 6 or above
2.NPM version 5.2 or above
3.Create-react-app tool for running the React App
4.React Hooks Installation:
There is no separate command to install hooks in react, Instead we need to use the latest React version which supports the hooks feature.
npm install react@16.8.0-alpha.1 –save
npm install react-dom@16.8.0-alpha.1 –save
The above command will install the latest React and React-DOM alpha versions which support React Hooks.
how to check react versions?
The package.json file lists the React and React-DOM dependencies as given below.
“react”: “^16.8.0-alpha.1”,
“react-dom”: “^16.8.0-alpha.1”,
5.React Build-in Hooks:
Here, are the APIs for the built-in Hooks in React. The built-in Hooks can be divided into two parts,
Basic Hooks
useState
useEffect
useContext
Additional Hooks
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue
Lets discuss all the hooks one by one…