x Java Java 8 JUnit JSON
  • XML
  • JDBC Spring Boot Microservices React Contact Us

    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]);


    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Share This