将带有状态的基于类的组件转换为带有钩子的功能组件

Question

I have this componet with state, here when the user is online it increases the count. I want to change it to functional component with hooks, which I have done below

class App extends React.Component {
  state = {
    isOnline: true,
    count: 1
  }

  handleOnline = () => {
    if (!this.state.isOnline) {
      this.setState({
        count: this.state.count + 1
      }, () => {
        this.setState({ isOnline: !this.state.isOnline })
      })
    } else {
      this.setState({ isOnline: !this.state.isOnline })
    }

  }
  render() {
    return (
      <div className="App">
        <h1>online ==> {this.state.isOnline ? 'Online' : 'Offline'}</h1>
        <h1>count ==> {this.state.count}</h1>
        <button onClick={this.handleOnline}>Toggle</button>
      </div>
    );

  }
}

Here is my conversion to functional component with hooks,

const App = () => {
  const [isOnline, setIsOnline] = useState(true)
  const [count, setCount] = useState(1)

  const handleClick = () => {
    if (!isOnline) {
      setIsOnline(!isOnline)
      setCount(count + 1)
    } else {
      setIsOnline(!isOnline)
    }
  }

  return (
    <div className="App">
      <h1>online ==> {isOnline ? 'Online' : 'Offline'}</h1>
      < h1 > count ==> {count}</h1>
      <button onClick={handleClick}>Toggle</button>
    </div>
  )
}

In the class based component, I have read not to use setState one after another so I used the callback function in this.setState like this

this.setState({
        count: this.state.count + 1
      }, () => {
        this.setState({ isOnline: !this.state.isOnline })
      })

Now, in the functional component I have used setCount and setIsOnline one after another is it good ???

const handleClick = () => {
    if (!isOnline) {
      setIsOnline(!isOnline)
      setCount(count + 1)
    } else {
      setIsOnline(!isOnline)
    }

I have read to use useEffect for callbacks, but all I get is infinite loop . Even though both of my components work and give me the desired result . I wanted to know if i must use useEffect for the callback or if my implementation with hooks in functional component is correct???

Answer 1

This implementation is correct, yes we should not set one state after the other because setState works asynchronously but since you are only setting two states so its fine.
Although you can also keep one state object instead of both separate states ie

const [state, setState] = useState({ count: 1, isOnline: true });

And then you can set both object keys in a single setState, like:

setState(() => ({
  count: 1,
  isOnline: false,
}))

Also in the class based approach you have used a callback but you actually don't need that, you can use single setState for setting both states ie

this.setState(() => ({
  count: this.state.count + 1, 
  isOnline: !this.state.isOnline ,
}))

Another important note:

Try to use functional set state as I use in examples above, as it reduces the risk of being caught into React state asynchronous issues.

Answer 2

Calling set state one after the other is totally fine and is the correct thing to do here:

const handleClick = () => {
  if (!isOnline) {
    setIsOnline(!isOnline)
    setCount(count + 1)
  } else {
    setIsOnline(!isOnline)
  }
}

State is updated asychronously, which means that your state variables isOnline and count don't actually change until your component re-renders. Calling setCount and setIsOnline doesn't update these variables, but tells React to update on the next render.

This is why you can't do something like this:

const handleClick = () => {
    setCount(count + 1)
    setCount(count + 1)
}

The count would be incremented by 1, NOT by 2.

Why?

Because the value count has not been updated yet, since we have to wait until re-render before it gets updated. That means count has the same value the entire way through the function - it never changes. So you can call setCount(count + 1) a million times and the value will only ever increment by 1.

This is what people mean when they say you should use the set state callback function.

This is the set state callback function:

const handleClick = () => {
    setCount(prev => prev + 1)
    setCount(prev => prev + 1)
}

This works as expected, and count will now be incremented by 2.

If we pass a function like this prev => prev + 1 to set state, React will pass the most recent value to the function.

The rule is:

Every time you use the old state value to set the new state value - pass a function to set state.

So although your current implementation does work, you should really be passing a function to set state on count since you are depending on previous state:

const handleClick = () => {
  if (!isOnline) {
    setIsOnline(!isOnline)
    setCount(prev => prev + 1)
  } else {
    setIsOnline(!isOnline)
  }
}

Usually you should do this for your boolean value too, for example:

setIsOnline(prev => !prev)

but since you're using isOnline in your if statement, you shouldn't do that here as the prev value may be different than the value your if uses.