Posted on Jul 19 React Hooks allow functional components to use React features such as state and life cycle methods. Functional components use hooks to maintain state, fetch data from an external source, cache results of an expensive calculation, and receive data from distant parent components without passing it as props. Knowing which React hooks to use can be tricky. In two articles series, we will look at each of the React Hooks and demonstrate their usage with code examples.These two articles series are for React developers who wish to understand React hooks better. The article assumes the reader has basic knowledge of React, functional components, lifecycle methods, and how to include React library in a project. In this article, the reader will learn aboutHooks are call within a functional component.Hooks are call at the top level of a component.It cannot be conditional Hooks begin with the keyword use.To use hooks in an application, we import the hooks using the keyword import.In the above example, we imported the useState from React. We can import more than one hooks. See the example below.React comes with built-in hooks. Also, we can customize hooks to meet specific requirements.React Built-Hooks are categorize into the following groups:1)State Hooks 2) Effect Hooks3) Context Hooks4) Performance Hooks5) Other HooksState in react is a built-in react object that stores data or value of a property. State let component remember user input between re-render. When the value of a property changes, react re-renders the component. useState and useReducer are two hooks that manage the state in React. useState is a react Hook that updates or sets the value of a property directly. The useState returns an array of two values. The current state and a function that sets or updates the current state.Line 1: We imported useState. Line 2: We created a react functional component called MyDetails.Line 3: We initialized useState with a string and deconstructed the array returned by useState with variable text and function setText.Line 4: We declared a function to handle the form submission.Line 5: We called the event.preventDefault function to prevent default form propagation.Line 6: We assigned the value of the textarea element to the variable textForm.Line 7: Called setText to set the value of myText.Line 9: Return JSX of MyText component.React useState hook can be initialized with an empty string, an object, or an array. See the code example below.Line 3: We initialized useState with an object with firstname, lastname, and age as properties. Line 4: We declared the handleSubmit function with an event argument.Lines 6,7,8: We assigned the values of the input fields to variables.Line 8: We called the setMyDetails to set the value of the properties of MyDetails.Line 13: It rendered JSX of the MyDetails component.Line 25: We called the Object.entries function to transform myDetails into an array of key and value pairs and iterated through the returned array with the array.map function.useReducer sets or updates state but the logic to update the state is in another function called reducer.useReducer takes three arguments: the reducer function, the initial argument, and an init function(optional). The init function returns the initial state. If it is not specified, it defaults to the initial argument. The useReducer returns an array of two values: the current state and a dispatch function that lets you update the current state to a new value.Line 2: We declared a reducer function with two arguments; jobDescription(state) and actionLine 3-11: We passed action.type through a switch block, each case set the category and returned the updated category.Line 12: We declared a variable initial argument and initialized it with an object that has a category field with an empty value.Line 13: We declared an Employee component.Line 14: We called a useReducer hook with two arguments; reducer function and intialArg. The useReducer returned an array of two values which we deconstructed into variable jobDescription(state) and a dispatch function.Line 16: We used the HTML select tag to create four options field, with an onChange event listener. Whenever there is a change in the selected value, the dispatch function will be called inside the event listener.Line 17-20: The different option.Line 21: We rendered the current jobDescription(state).In part 1 of react hooks, we defined hooks, enumerated the rules for hooks, and mentioned various types of hooks. We demonstrated how to use useState and useReducer hooks with code examples. In part two of react hooks, we will discuss other react hooks.Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse sockrepublic - Jul 18 Sadeedpv - Jul 18 Dom Sipowicz - Jul 18 Joan Awinja Ingari - Jul 18 Once suspended, eyitayoitalt will not be able to comment or publish posts until their suspension is removed. Once unsuspended, eyitayoitalt will be able to comment and publish posts again. Once unpublished, all posts by eyitayoitalt will become hidden and only accessible to themselves. If eyitayoitalt is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Eyitayo Itunu Babatope. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag eyitayoitalt: eyitayoitalt consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging eyitayoitalt will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.