React useeffect example
In this tutorial, we will see how to use useEffect
react hook which is used to handle side effects in the react components.
First we create a sign up form with two field userid, password and submit button. We will enable submit button once user had entered more than 6 character in both userid, password textboxes.
Step 1) Create SignUp Component
We enable/disable submit button whenever user enters userid or password of more than 6 characters.
import { useState, useEffect } from "react";import './SignUp.css';const SignUp = () => { const [enteredUserId, setEnteredUserId] = useState(''); const [enteredPassword, setEnteredPassword] = useState(''); const [enableButton, setEnableButton] = useState(false); const validateForm = () => { console.log('Inside ??? ' + enteredUserId); if (enteredUserId.trim().length > 6 && enteredPassword.trim().length > 6) { setEnableButton(true); } else { setEnableButton(false); } } const enteredUserIdHandler = (event) => { setEnteredUserId(event.target.value); validateForm(); } const enteredPasswordHandler = (event) => { setEnteredPassword(event.target.value); validateForm(); } return ( <div className='signup'> <input type="text" onChange={enteredUserIdHandler} /> <br></br> <input type="text" onChange={enteredPasswordHandler} /> <br></br> <button disabled={!enableButton}>Sign Up</button> </div> );};export default SignUp;
Step 2) Create App.js
import Signup from './SignUp';import './App.css';function App() { return ( <div className="App"> <Signup/> </div> );}export default App;
Suppose we want to enable/disable submit button only when password is entered, then calling validateForm inside enteredUserIdHandler is a side effect. So instead of calling validateForm inside enteredUserIdHandler or enteredPasswordHandler, we can move the validation logic inside useEffect
method and control validating of password by passing enteredPassword in the dependencies argument.
If you pass both enteredUserId, enteredPassword then validation will run when user enters either of username or password.
Code inside useEffect
runs on every render, or when any dependency changes or first render. You can control is by passing dependency argument.
Below will run on every render
useEffect(() => {});
Below will run on first render
useEffect(() => {}, []);
Below will run only when password is entered but not userid
useEffect(() => { console.log('Inside useEffect ' + enteredPassword); if (enteredPassword.trim().length > 6) { setEnableButton(true); } else { setEnableButton(false); }}, [enteredPassword]);