Posted on Sep 23, 2019

React Hooks, What is it? How to use it? Pt.2 - Using "useState" and "useEffect"

#react #100daysofcode #reacthooks #javascript

On this second part, Following our project sample, I'm going to show you how to use useState and useEffect.

Third Step: Continuing to use "useState"

So now we'll be able to type a new book to our list and save it:

// We need to import useState from react import React, { useState } from 'react'; export default function App() { const [books, setBooks] = useState(['Javascript', 'React']); /* Here we're going to create a new state to save the value typed for newBook */ const [newBook, setNewBook] = useState(''); /* Here we're going to create a function to bind this value inputted */ const handleBookInput = e => setNewBook(e.target.value); /* Here we're going to pass as argument 'newBook' xD */ const addBook = () => setBooks(newBook); return ( <> <input value={newBook} onChange={handleBookInput} placeholder="add here you new book" onKeyPress={e => e.key === 'Enter' && addBook()} /> <button onClick={addBook}>Add Book!</button> <ul> {books.map((book, index) => <li key={index}>{book}</li>)} </ul> </> ); };

I'm going to show the diffs between first and second code, these codes do the same thing 😄

--- import React from 'react'; +++ import React, { useState } from 'react';  --- class App extends React.Component { +++ export default function App() { --- state = { --- books: ['Javascript', 'React'], --- newBook: '', --- } +++ const [books, setBooks] = useState(['Javascript', 'React']); +++ const [newBook, setNewBook] = useState('');  --- handleBookInput = e => this.setState({ newBook: e.target.value }); +++ const handleBookInput = e => setNewBook(e.target.value);  --- addBook = () => { --- this.setState({ --- books: [...this.state.books, this.state.newBook], --- newBook: '', --- }); --- } +++ const addBook = () => setBooks(newBook);  --- render() {  return ( <> <input --- value={this.state.newBook} +++ value={newBook} --- onChange={this.handleBookInput} +++ onChange={handleBookInput}  placeholder="add here you new book" --- onKeyPress={e => e.key === 'Enter' && this.addBook()} +++ onKeyPress={e => e.key === 'Enter' && addBook()}  /> --- <button onClick={this.addBook}>Add Book!</button> +++ <button onClick={addBook}>Add Book!</button>  <ul> --- {this.state.books.map( --- (book, index) => <li key={index}>{book}</li> --- )} +++ {books.map((book, index) => <li key={index}>{book}</li>)}  </ul> </> ); ---} +++};  ---export default App; +++

Fourth Step: Using useEffect

Previously i show to you how to use state in a functional component, now i'm going to show how to use lifecycle methods;
First, These is the most used lifecycle methods from React.Component:
- componentDidMount()
- componentDidUpdate()
- componentWillUnmount()
Seat down, the way to use it in hooks is so hard and expensive 😄 :

 useEffect(() => {}, []); // xD easier, right? hehehe

let's put these methods to our case, we'll use componentDidUpdate to change document.title to show how many books are added, first in Class Component without hooks:

import React from 'react'; class App extends React.Component { state = { books: ['Javascript', 'React'], newBook: '', } componentDidUpdate() { document.title = `Current books added: ${this.state.books.length}` } handleBookInput = e => this.setState({ newBook: e.target.value }); addBook = () => { this.setState({ books: [...this.state.books, this.state.newBook], newBook: '', }); } render() { return ( <> <input value={this.state.newBook} onChange={this.handleBookInput} placeholder="add here you new book" onKeyPress={e => e.key === 'Enter' && this.addBook()} /> <button onClick={this.addBook}>Add Book!</button> <ul> {this.state.books.map( (book, index) => <li key={index}>{book}</li> )} </ul> </> ) } }; export default App;

the same using hooks:

// We need to import useEffect from react import React, { useState, useEffect } from 'react'; export default function App() { const [books, setBooks] = useState(['Javascript', 'React']); const [newBook, setNewBook] = useState(''); const handleBookInput = e => setNewBook(e.target.value); const addBook = () => setBooks(newBook); /* using useEffect you can use all lifecycle methods to use componentDidMount() {} in hooks you should code something like that: useEffect(() => { .... }, []); here useEffect get 2 arguments a function and a array, inside the function will contain your code, on componentDidMount the array value need to be empty. to use componentDidUpdate() {} in hooks the code will look like changing only one thing: useEffect(() => { .... }, [state_to_observe]); here use effect get 2 arguments like the code before, but the only change is on the second argument receives the state observer (Note: if do you want to observer many states you can put that states inside the array), in our sample we're going to use useEffect with state observer. */ /* When that state has any changes, the function inside useEffect is called xD easy peasy, right? */ useEffect(() => { document.title = `Current books added: ${books.length}` }, [books]); return ( <> <input value={newBook} onChange={handleBookInput} placeholder="add here you new book" onKeyPress={e => e.key === 'Enter' && addBook()} /> <button onClick={addBook}>Add Book!</button> <ul> {books.map((book, index) => <li key={index}>{book}</li>)} </ul> </> ); };