Part 44 React Tutorial | React Hooks | useState hook | React Hook Rules

Hooks:- ------ React hooks are a new feature introduced in React 16.8 (2019) that allows developers to use state and other React features without writing a class component. Hooks are functions that let you "hook into" React state and lifecycle features from functional components. Hooks allow developers to reuse stateful logic, making it easier to share and manage stateful logic between components. Some of the commonly used hooks are: 1. useState() - Allows functional components to manage state. 2. useEffect() - Runs a side-effect when a component is mounted or updated. 3. useContext() - Allows functional components to use a context that has been created outside of the component. 4. useReducer() - Allows for more complex state management. 5. useMemo() - Memoizes a function so that it only recomputes when the inputs change. 6. useCallback() - Memoizes a function so that it only changes when its dependencies change. 7. useRef React Hook rules:- ---------------- React hooks are a feature in React that allows you to use state and other React features in functional components, which were previously only available in class components. Here are some rules to keep in mind when using React hooks: Only call hooks at the top level: React hooks should only be called at the top level of functional components or custom hooks. They should not be called inside loops, conditions, or nested functions. Only call hooks from React function components: Hooks should only be called from within function components or custom hooks. They should not be called from regular JavaScript functions, event handlers, or lifecycle methods. Use the correct hook: React provides a variety of hooks for different purposes, such as useState(), useEffect(), useContext(), and useRef(). Make sure to use the appropriate hook for the task you are trying to accomplish. Use the same order for hooks: When using multiple hooks in a single component, make sure to use them in the same order on every render. This ensures that the React component always renders in a consistent way. Use hooks conditionally: Hooks should only be used conditionally, such as inside an if statement or a switch statement. This ensures that hooks are only called when needed, and avoids unnecessary performance issues. Don't use hooks inside loops: Hooks should not be called inside loops, as this can cause unnecessary re-renders and can lead to performance issues. Don't mutate state directly: State should never be mutated directly using hooks like useState(). Instead, use the function provided by the hook to update the state. 1.useState() ------------ - useState is a Hook, We call it inside a function component to add some local state to it. - React will preserve this state between re-renders. useState returns a pair: the current state value and a function that lets you update it. - You can call setFunction from an event handler or somewhere else. - useState function will take the default value as an argument.