Now you see me!

} else { return (

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36 .

Challenge: Use State to Toggle an Element

Link to the challenge:
freecodecamp.org

Hello there,

If you would like to read more about this, here is the official documentation on the asynchronous nature of setState : https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

Upon using the setState method, you are not guaranteed your state will be updated in any particular order. I learnt this this hard way, when doing the JavaScript Calculator Project . The issue with this is when any one state object is dependant upon another state object, or the current prop object value - as seen in the example:

this.setState({
  counter: this.state.counter + this.props.increment
Essentially, when this.setState is called, this.state.counter could be equal to 1, but, due to other processes in the application, by the time the state object counter is actually updated, this.state.counter is equal to something else.
If you use a function:
this.setState((state, props) => ({
  counter: state.counter + props.increment
state and props are snapshots of the current state and props at the time of call, as opposed to time of execution/completion.
Hope this helps
              So, the arguments state and props passed to the function inside the setState are sent by a function caller(or something like that) as parameters and therefore they are the latest values?
It is very hard to understand without seeing what is happening at the background(if something is happening)
When you use this does it refer to the state on the UI? Can we not remove this and write the following code to update the current state or does it have to be done with a function? Confusing²
this.setState({
  counter: state.counter + props.increment
It refers to the component itself. So, you create a state object in the constructor (this.state), and the this in both cases refers to the same thing - the component.
Hope it helps
 proxima79:
I can’t see any difference apart from the functional one updates by 3 at a time and the normal way by 1.
This is the whole point. They should both do the same - update by 3.
Without the updater function, multiple setState calls can be accidentally batched into one call.
              okay, that makes sense but still hard to get my head around how using function does that. I understand that I should use function but I would understand it better if I knew how it works.
Thank you very much for your answers and the demo.
Have a good day.
              Well, if you are comfortable with TypeScript, then you could have a look at the definition of setState:
setState<K extends keyof S>(
   state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
   callback?: () => void
): void;
forceUpdate(callback?: () => void): void;
render(): ReactNode;
Or, maybe better to understand, the hook useState:
export function useState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
      github.com
    facebook/react/blob/master/packages/react/src/ReactHooks.js
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 * @flow
import type {
  MutableSource,
  MutableSourceGetSnapshotFn,
  MutableSourceSubscribeFn,
  ReactContext,
} from 'shared/ReactTypes';
import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';
import invariant from 'shared/invariant';
import ReactCurrentDispatcher from './ReactCurrentDispatcher';
  This file has been truncated. show original
              It’s like a chain, right. Learn HTML, CSS and then JavaScript, then React and Redux and then React-Redux and now TypeScript. I can’t…  I am overload with too many questions already.
I think I will live with "just use the bloody function when you update the state" statement.
Also, these parenthesis and curly braces are confusing too. On the demo you sent me, you use arrow functions and there is return. I thought with arrow functions we can omit return. When I try to remove, it doesn’t work straight away as I need to arrange the parenthesis and curly braces correctly. :pullingmyhairout:
Like you said, playing helps quite a lot.
Thank you.