Question 73616 in Reactjs Question posted in
The new location for the React Documentation can be found here.

What is the difference between this two code blocks.? React JS Hooks – Reactjs

This is my useState hook .

const [fullName, setFullName] = useState({
    fName: "",
    lName: ""
  });

This is my first code block.

1. function handleChange(event) {
    const { value, name } = event.target;
    if(name === "fName"){
      setFullName({
        fName:value,
        lName:fullName.lName
      });
    }else if(name === "lName"){
      setFullName({
        fName : fullName.fName,
        lName : value
      });
    }
  }

This is my second code block.

2.function handleChange(event) {
    const { value, name } = event.target;
    setFullName(prevValue => {
      if (name === "fName") {
        return {
          fName: value,
          lName: prevValue.lName
        };
      } else if (name === "lName") {
        return {
          fName: prevValue.fName,
          lname: value
        };
      }
    });
  }

Both things working same but I can’t see the difference between them behind the seen.

Tags:

3

Answers


  1. 0

    In the first code block a condition check is performed before the function call. If either condition passes, the function will be executed.

    In the second block the function is always executed. In the case where neither condition is true, you just wasted valuable processor time calling a function that didn’t need to be.

    Login or Signup to reply.
  2. 0

    if you use if statement without a ‘return’ statement, the program will continue executing the code after checking if block.

    1. function handleChange(event) {
    const { value, name } = event.target;
    if(name === "fName"){
      setFullName({
        fName:value,
        lName:fullName.lName
      });
    }else if(name === "lName"){
      setFullName({
        fName : fullName.fName,
        lName : value
      });
    }

    //the code here will be executed
    }

    on the other hand, if you use ‘return’ inside ‘if’ and if condition is met then the code after if statement will not be executed.

    2.function handleChange(event) {
    const { value, name } = event.target;
    setFullName(prevValue => {
      if (name === "fName") {
        return {
          fName: value,
          lName: prevValue.lName
        };
      } else if (name === "lName") {
        return {
          fName: prevValue.fName,
          lname: value
        };
      }
    });

    //the code here will not be executed if condition is true
    }

    Login or Signup to reply.
  3. 0

    Well, here both code blocks are essentially doing the same thing. Using the prevValue the way you have done in the second code block can be useful when it is imperative that you keep track of the previous state value.

    For example, let’s say a state value for a variable called number and a function called increment:

    const [number, setNumer] = useState(0);
const increment = () => {
  setNumber(number + 1)
  setNumber(number + 1)
  setNumber(number + 1)
}

    Here, it is tempting to think that the answer would be 3. But instead, each time this function is simply adding 0 (i.e. the value of number) plus 1. In order words, it is just setting the value of number to 1 three times.

    We could grab the previous value of state to make this function behave as expected.

    const increment = () => {
  setNumber(prevValue => prevValue + 1)
  setNumber(prevValue => prevValue + 1)
  setNumber(prevValue => prevValue + 1)
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search