Basics of React Hooks.pptx.pdf
1 like•3,485 views
The document is a presentation on the basics of React Hooks, covering etiquette for sessions, an overview of React, and the introduction and motivation behind using Hooks. It discusses the reasons for the introduction of Hooks, types of Hooks, rules for using Hooks, and includes specific details about the useState Hook and how to implement it. Additionally, it provides references for further learning about Hooks and React.
![How to implement useState()
Import useState() :-
❖ To use the useState hook, we first need to import it into our component.
import { useState } from “react”;
Initialize useState() :-
❖ useState accepts an initial state and returns two values
➢ The current state
➢ A function that updates the state.
function FavoriteColor() {
const [ color, setColor ] = useState(“ ”);](https://image.slidesharecdn.com/basicsofreacthooks-220920052939-3edbf7db/85/Basics-of-React-Hooks-pptx-pdf-18-320.jpg)
Basics of React Hooks.pptx.pdf
- 1. Presented By: Abhishek & Saurabh Choudhary Basics of React Hooks
- 2. Lack of etiquette and manners is a huge turn off. KnolX Etiquettes Punctuality Join the session 5 minutes prior to the session start time. We start on time and conclude on time! Feedback Make sure to submit a constructive feedback for all sessions as it is very helpful for the presenter. Silent Mode Keep your mobile devices in silent mode, feel free to move out of session in case you need to attend an urgent call. Avoid Disturbance Avoid unwanted chit chat during the session.
- 3. Our Agenda 01 React In Brief 02 Introduction to Hooks 03 Motivation behind Hooks 04 Types and Rules 05 Our First React Hook (useState Hook)
- 5. What is React ? ❖ React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. ❖ It is a component-based, front-end library responsible only for the application’s view layer. ❖ React is not a framework that many of us think rather it is a User Interface library that helps build beautiful and interactive UIs. ❖ React follows Declarative approach and is totally component-based where we develop simple components and then combine them together to build a complex UI.
- 8. What are Hooks ? (Ques.) What is Hook in General terms ? ❖ Hooks are a new feature addition in React version 16.8 which allow you to use React features without having to write a class ❖ Ex : State of a Component (Ans.) a curved piece of metal, plastic, etc. that is used for hanging or catching something
- 10. Why Hooks ? ➢ Understand how this keyword works in JavaScript ➢ Remember to bind event handlers in class components ➢ Classes don’t minify very well and make hot reloading very unreliable Reason 1: Classes confuse both people and machines
- 11. Why Hooks ? ➢ There is no particular way to reuse stateful component logic ➢ HOC (Higher Order Component) and render props patterns do address this problem but have to do some restructuring of components ➢ Makes the code harder to follow ➢ There is need a to share stateful logic in a better way Reason 2: Itʼs hard to reuse stateful logic between components
- 12. Why Hooks ? ➢ Create components for complex scenarios such as data fetching and subscribing to events ➢ Related code is not organized in one place ➢ Ex: Data fetching - In componentDidMount and componentDidUpdate ➢ Ex: Event Listeners - In componentDidMount and componentWillUnmount ➢ Because of stateful logic - Cannot break components into smaller ones Reason 3: Complex components become hard to understand
- 13. Types and Rules of Using Hooks
- 14. Types ➢ useState Hooks ➢ useEffect Hook ➢ useRef Hook ➢ useCallback Hook ➢ useMemo Hook ➢ useContext Hook ➢ useReducer Hook Built-In Hooks : Custom Hooks : ➢ You can create your own custom hooks if you have stateful logic that is needed by multiple components in you application.
- 15. Rules ➢ Hooks are called only at the top level of a component. ➢ Do not call Hooks inside loops, conditions, or nested functions. ➢ Hooks are called only from React functional Components. ➢ Do not call Hooks from regular JavaScript functions. There is one other way to call Hooks i.e. in your own custom Hooks Hooks are normal JavaScript functions, but they impose some additional rules :
- 16. Let’s Implement our First Hook
- 17. useState Hook ❖ The useState() is a hook that allows you to have state variables in functional components. ❖ Basically useSate is the ability to encapsulate local state in a functional component. ❖ The useSate hook is a special function that takes the initial state as an argument and returns an array of two entries. ❖ You pass the initial state to this function and it returns a variable with the current state value(not necessarily the initial state)and another function to update this value.
- 18. How to implement useState() Import useState() :- ❖ To use the useState hook, we first need to import it into our component. import { useState } from “react”; Initialize useState() :- ❖ useState accepts an initial state and returns two values ➢ The current state ➢ A function that updates the state. function FavoriteColor() { const [ color, setColor ] = useState(“ ”);
- 19. Creating an array state with useState ❖ we destructure the return value of the useState() hook to get a variable that contains the state array and a method for updating the state.
- 20. Demo
- 21. References To learn more about Hooks follow the below links : https://reactjs.org/docs/hooks-intro.html You can find Free and Paid courses here : https://reactjs.org/community/courses.html
- 22. Thank You ! Get in touch with us: Lorem Studio, Lord Building D4456, LA, USA