previousState in react a built-in function?

Question

In the following code, I get it when setCar is a function that can update a state of color using something like setColor("blue"), but in this example it has previousState. Is that a parameter or a function? I mean nowhere has it been declared before in the code.

import { useState } from "react";
import ReactDOM from "react-dom/client";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  const updateColor = () => {
    setCar(previousState => {
      return { ...previousState, color: "blue" }
    });
  }

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
      <button
        type="button"
        onClick={updateColor}
      >Blue</button>
    </>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

_"no where has been declared before in the code"_ - it's declared as the parameter to the function. You should be familiar with basic JS/ES6 syntax before trying to add the React API on top. — jonrsharpe, Sep 20 '22 at 21:46
It is also described in the react docs: https://reactjs.org/docs/hooks-reference.html#functional-updates — Xiduzo, Sep 20 '22 at 21:47
I am confused, when previousState is declared as a parameter, it just knows all the stuff within the object such as brand, model, year etc so that it can return ...previousState? — jimzhou, Sep 20 '22 at 21:50
_"it just knows all the stuff within the object"_ - what? It _is_ the object. The value is passed in when the function is _called_. — jonrsharpe, Sep 20 '22 at 21:56
wait, previousState is an object? (how do you know it is an object)....i thought it is a parameter that is declared inside setCar function,like x or y — jimzhou, Sep 20 '22 at 22:03
It _is_ a parameter, whose _value_ when it gets called is an object (and I know that because _that's the type of the state_). This is basics of _programming_, not just JS - functions can define parameters, whose values are passed by their _callers_. — jonrsharpe, Sep 20 '22 at 22:07
hmmm, I see what you mean, it is like when you call a function, you put value in when calling a function. so the value replaced the parameter, so in this case, it is a parameter, and it return ....previousState (this is an object, that remembers from all the initial state value). — jimzhou, Sep 20 '22 at 22:11
Xidou - `setCar` can take a function or an object. It's a common confusion. and in that function, you can name the previousState parameter whatever you want. — Mark Swardstrom, Sep 20 '22 at 23:48

ray · Accepted Answer · 2022-09-21T16:54:49.973

When you pass a function to a setState function, React will invoke that function and pass the existing state in as an argument. You can name that argument whatever you want.

Splitting it out for illustrative purposes:

// your state updater function
const updater = previousState => {
  return { ...previousState, color: "blue" }
}

// gets passed to setCar
setCar(updater)

// and React invokes it, passing in the current state
const newState = updater(existingState);

It's not magic. React knows the state and passes it in when it calls your function.

score 0 · Answer 2 · answered Sep 20 '22 at 21:53

0

previousState is a parameter but the name is up to you.

Just to demonstrate what I mean. You could do it this way as well

setCar(anyName => {
      return { ...anyName, color: "blue" }
});

answered Sep 20 '22 at 21:53

Mohammad Faisal

2,265
1
10
16

yea, but I mean what it is confusing is that anyName can return ...anyName which it grabs all the stuff in the object like brand, year, etc. I mean that is quite magic, is that something built in from setCar function? – jimzhou Sep 20 '22 at 21:56
@jimzhou is it the object [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) you're unfamiliar with? I'd suggest bookmarking https://stackoverflow.com/q/9549780/3001761. – jonrsharpe Sep 20 '22 at 21:58
ok thanks jonrsharpe.... I am so confused by when to use ( ) or { } and so many synatx stuff in jsx return statement.....so confused by all of them! – jimzhou Sep 20 '22 at 22:01
thanks Jon! I am going to bookmark it, so long list, but seems a great sources to learn! Love it at first sight! – jimzhou Sep 20 '22 at 22:15

previousState in react a built-in function?

2 Answers2