Downloaded 41 times
![How to implement useState()
Import useState() :-
â To use the useState hook, we ďŹrst 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)
![How to implement useState()
Import useState() :-
â To use the useState hook, we ďŹrst 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/75/Basics-of-React-Hooks-pptx-pdf-18-2048.jpg)
Uploaded byKnoldus Inc.
Basics of React Hooks.pptx.pdf
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.
TechnologyâŚ
More Related Content
Similar to Basics of React Hooks.pptx.pdf
More from Knoldus Inc.
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Basics of React Hooks.pptx.pdf
- 1. Presented By: Abhishek& Saurabh Choudhary Basics of React Hooks
- 2. Lack of etiquetteand manners is a huge turn oďŹ. 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 ReactIn Brief 02 Introduction to Hooks 03 Motivation behind Hooks 04 Types and Rules 05 Our First React Hook (useState Hook)
- 4.
- 5. What is React? â React.js is an open-source JavaScript library that is used for building user interfaces speciďŹcally 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.
- 7.
- 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
- 9.
- 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 Rulesof 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 arecalled 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.
- 17. useState Hook â TheuseState() 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 implementuseState() Import useState() :- â To use the useState hook, we ďŹrst 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 arraystate 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.
- 21. References To learn moreabout Hooks follow the below links : https://reactjs.org/docs/hooks-intro.html You can ďŹnd Free and Paid courses here : https://reactjs.org/community/courses.html
- 22. Thank You ! Getin touch with us: Lorem Studio, Lord Building D4456, LA, USA