Classes can be a large barrier to learn React, React team. They don’t minify very well and they make hot reloading unreliable. With React Hooks, you don’t need to convert a function component into class component. You can use state and lifecycle methods . says in the function component Okay, but what are hooks really? They are functions that let you React internal state and lifecycle features “hook” into from function components Great! How do I do that? First, Update your React and React DOM dependency in your project. Hooks are freshly released on React 16.8.0 today! npm install --save react@^16.8.0 react-dom@^16.8.0 Now let’s take a look on the hook. Here is the demo: useState hook useState We need to have a simple class component with state for comparison. The easiest example I can imagine is of an input form: class NameForm extends React.Component {constructor(props) {super(props);this.state = { value: '' };} handleChange = event => {this.setState({ value: event.target.value });} render() {return (<form><label>Name:<input type="text"value={this.state.value}onChange={this.handleChange} /></label><input type="submit" value="Submit" /></form>);}} Now let’s rewrite it using hook. We'll import it from package so we don't have to write all the time. useState react React.useState import React, { useState } from 'react'; Now change our into a function component NameForm function NameForm(props) { 

} hook takes one argument, which is the initial state, and it returns two values: the current state and a function that can be used to update the state. You can replace the state initialization in the constructor: useState this.state = { value: '' }; into this: function NameForm(props) {  const [value, setValue] = useState(''); } Notice the use of square brackets when state variable is declared. This is the ES6 “ ” syntax, and it means we’re assigning the first value returned by to and the second value to . [] array destructuring useState value setValue So this means we have a state named and we can update it by calling on function. Let’s use it on our render method: value setValue function NameForm(props) { const [value, setValue] = useState(''); return (<form><label>Name:<input type="text" /></label><input type="submit" value="Submit" /></form>)} value={value}onChange={event => (setValue(event.target.value))} props no longer call a method, instead we have an arrow function that will call function, which update our . Oh, and unlike in the class component, updating a state variable using hooks Onchange handleChange setValue state this.setState always replace it instead of merging it. Having multiple states? Then call on as many times as you need. useState function SimpleForm(props) { const [firstName, setFirstName] = useState('');const [lastName, setLastName] = useState('');const [age, setAge] = useState(''); return (<form><label>First Name:<input type="text" /></label><label>Last Name:<input type="text" /></label><label>Age:<input type="number" /></label><input type="submit" value="Submit" /></form>)} value={firstName}onChange={event => (setFirstName(event.target.value))} value={lastName}onChange={event => (setLastName(event.target.value))} value={age}onChange={event => (setAge(event.target.value))} And that’s it with hook, really! useState Setting initial state from props Oh, it’s pretty easy! function SimpleForm( ) {const [firstName, setFirstName] = useState( );const [lastName, setLastName] = useState( );const [age, setAge] = useState( ); props props.firstName props.lastName props.age //...} ReactDOM.render(<SimpleForm />,document.getElementById("root")); firstName="JOHN" lastName="Edward" age={30} Can I use object in state? Sure! Just as class can accept object or array, can have them as well. But to make it work, let’s add name props to your input elements. We also use to update our state. state useState spread properties function SimpleForm(props) {//create object state const [form, setForm] = useState({FirstName: '',LastName:'',age:''}); const handleChange = event => {// use spread operatorsetForm({...form,[event.target.name]: event.target.value});} return (<form><label>First Name:<inputtype="text" /></label><label>Last Name:<inputtype="text" /></label><label>Age:<inputtype="number" /></label><input type="submit" value="Submit" /></form>)} name="firstName"value={form.firstName}onChange={handleChange} name="lastName"value={form.lastName}onChange={handleChange} name="age"value={form.age}onChange={handleChange} What about array? This one’s a bit unusual, but yes, just like in class . We’ll use on array update. state concat function SampleArrayState(props) {//create array state const [nameArray, setNameArray] = useState(["Carl"]); const updateArray = () => {setNameArray(nameArray.concat("John"));}; return (<React.Fragment><button onClick={ }>Click me!</button><div> </div></React.Fragment>);} updateArray {nameArray.toString()} And Boolean? Got you covered here: function SampleBooleanState(props) { const [show, setShow] = useState(true);const visibility = show ? 'visible' : 'hidden'; return (<React.Fragment> </React.Fragment>);} <h1 style={{ visibility }}>useState Hook is awesome!</h1><buttononClick={() => { setShow(!show) }}>{`${show ? 'Hide' : 'Show'} the Header!`}</button> The rules of hooks The important thing to remember is that hooks don’t work in a class component. They are made for function components. Don’t call hooks from inside nested function, loops or conditionals. Don’t call hooks from regular JavaScript function. This source Conclusion The hook enables function components to access React’s internal state and update it. The state can be any data type: , , , , or . accept one argument: the initial data, and it returns an array of two values: the current state value and the function/ method that can be used to update the state. useState string number boolean array object useState There are more than just hook, but let’s cover each hook in their own single post. useState Here’s a list of all (yes, you can write a custom hook!) available as of this writing. I’ll be covering them in the next posts. built-in hooks Until next time! Also, I’m writing a book on learning React properly without the stress. You might wanna check it out here . Originally published at sebhastian.com .

Mozilla

Super

Target

Get the latest news on AI trends and developments

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

React Hooks are live. Here is your introduction

Too Long; Didn't Read

Companies Mentioned

Nathan Sebhastian

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

React Hooks are live. Here is your introduction

Too Long; Didn't Read

Companies Mentioned

Nathan Sebhastian

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES