DEV Community

Tauan Camargo
Tauan Camargo

Posted on

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

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>
    </>
  );
};
Enter fullscreen mode Exit fullscreen mode
  • 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;
+++ 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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;
Enter fullscreen mode Exit fullscreen mode
  • 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>
    </>
  );
};
Enter fullscreen mode Exit fullscreen mode

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

to be continued

React hooks Pt. 1 - Link here
React hooks Pt. 2 - Link here

Top comments (3)

Collapse
 
drzaln profile image
Doddy Rizal Novianto

So, basically useEffect covers the three lifecycle methods?

Collapse
 
tauantcamargo profile image
Tauan Camargo

Hey, bascically but the way that uses is different i'm going to show how to do :D

Collapse
 
drzaln profile image
Doddy Rizal Novianto

Okay then :D