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>
</>
);
};
In the next post we're going to use useCallback()
, see you soon 😄
Top comments (3)
So, basically useEffect covers the three lifecycle methods?
Hey, bascically but the way that uses is different i'm going to show how to do :D
Okay then :D