Welcome to Hooks. After watching this video, you will be able to: Explain what are Hooks. List the advantages of Hooks. Enumerate the best practices of using Hooks. Describe the standard and custom Hooks. Hooks are a simpler way to encapsulate stateful behavior and side effects in user interfaces. Hooks were introduced in February 2019 as part of React 16.8. They help you make your code clearer and better structured. Hooks allow function components to have access to state and other React features. They are regular JavaScript functions. They provide a way to use functionalities such as context or state, which could earlier only be achieved through classes, and now can easily be done using function components. React Hooks enable functional components to attach local state with it, and this state will be preserved by React when the component re-renders. Hence, this allows React to be used without classes. As the name suggests, it enables you to hook into React state and lifecycle features from function components. You use a class component to manage state and lifecycle methods in React components. Developers have encountered problems while using class components, such as wrapper complexity, unmanageable size of components, and confusing classes. Hooks solve these problems by behaving like functions that let you “hook into” React state and lifecycle features from function components. Hooks help you make complex forms simpler without the use of classes. And another great thing about Hooks is that you can create your own! This means that instead of re-writing code from one component to another, you can write an abstract custom Hook and reuse it. So advantages of using Hooks to write React components are: Hooks makes code readable. The code used with Hooks to write React components is less. Overall, the component written with Hooks is optimized. Hooks enable you to write a functional component with state. Writing complex components became easier using Hooks. Using Hooks, you can handle events and logics in functional components without using classes. And Hooks provides performance boost with functional components. Now, there are three best practices for using hooks in your React code: Hooks can only be called inside React function components. You cannot call Hooks from regular Javascript functions. Hooks can only be called at the top level of a component. You cannot call Hooks inside loops, conditions, or nested functions. And, Hooks cannot be conditional. Hooks use Node version 6 JavaScript platform. In addition, they use NPM version 5.2 or above. NPM is the package manager for the Node JavaScript platform. It is recommended to use Create-react-app tool for running the React App. Let us look at a list of standard hooks: useState, is a hook that allows you to use state in your function. It adds state to a function component. useEffect manages side effects such as document changes, HTTP, and so on. For example, If you need to fetch data, you could use the Hook "useEffect." useContext manages context changes and provides the component with access to a context. And useReducer manages Redux state changes. Like a light form of Redux, this Hook provides a dispatch function and a state, while taking a reducer and an initial state. Note that this is not a full replacement for Redux, though it could be used in certain situations. Custom React hooks are essential tools that let you add special, unique functionality to your React applications. Custom Hooks are named with "use" as a prefix and for example, a custom hook could be named useLocalStorage or useAuthentication. A custom Hook is a new composition of one or multiple Hooks. Since Hooks can be treated as functions, they have the same features as functions. They are reusable, can be broken into smaller hooks that can be combined, and they are testable. In the code example, useState is the Hook which needs to call inside a function component to add some local state to it. The useState returns a pair where the first element is the current state value, or initial value, and the second one is a function which allows us to update it. After that, we will call this function from an event handler or somewhere else. In this video you learned that: Hooks provide a way to use functionalities such as context or state, without classes. Hooks help you make complex forms simpler without the use of classes. Hooks enable you to write a functional component with state. Standard Hooks enable you to manage state, side effects, context and Redux state changes. And finally, Custom Hooks enable you to add special and unique functionality to your applications.
