React Hooks, What is it? How to use it? Pt.2 - Using "useState" and "useEffect"
Tags: react, 100daysofcode, reacthooks, javascript
Published: 2019-09-23 19:25:01

---
title: React Hooks, What is it? How to use it? Pt.2 - Using "useState" and "useEffect"
published: true
description: An overview of how to use react hooks.
tags: reactjs, 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:
```jsx
// 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 :smile:

```diff
--- 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 :smile: :
```jsx
  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:
```jsx
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:
```jsx
// 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>
    </>
  );
};
```

In the next post we're going to use `useCallback()`, see you soon :smile:


![to be continued](https://thepracticaldev.s3.amazonaws.com/i/ydfudxm1k67q7npg62b8.jpg)

React hooks Pt. 1 - [Link here](https://dev.to/lukyhenson/react-hooks-what-is-it-how-to-use-it-pt-1-using-usestate-1k8)
React hooks Pt. 2 - [Link here](https://dev.to/lukyhenson/react-hooks-what-is-it-how-to-use-it-pt-2-using-usestate-and-useeffect-4mee)