Reactjs – How to use `setState` callback on react hooks

react-hooksreactjsuse-state

React hooks introduces useState for setting component state. But how can I use hooks to replace the callback like below code:

setState(
  { name: "Michael" },
  () => console.log(this.state)
);

I want to do something after the state is updated.

I know I can use useEffect to do the extra things but I have to check the state previous value which requires a bit code. I am looking for a simple solution which can be used with useState hook.

Best Answer

You need to use useEffect hook to achieve this.

const [counter, setCounter] = useState(0);

const doSomething = () => {
  setCounter(123);
}

useEffect(() => {
   console.log('Do something after counter has changed', counter);
}, [counter]);

Related Solutions

Javascript – Loop inside React JSX

Think of it like you're just calling JavaScript functions. You can't use a for loop where the arguments to a function call would go:

return tbody(
    for (var i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

See how the function tbody is being passed a for loop as an argument – leading to a syntax error.

But you can make an array, and then pass that in as an argument:

var rows = [];
for (var i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

You can basically use the same structure when working with JSX:

var rows = [];
for (var i = 0; i < numrows; i++) {
    // note: we are adding a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

Incidentally, my JavaScript example is almost exactly what that example of JSX transforms into. Play around with Babel REPL to get a feel for how JSX works.

Android – How to implement ClientLogin on Android to access Google services

There's nothing special you need to do; you can use the standard Java networking and built-in Apache Commons HTTP client library to make the HTTP requests.

You just implement the required requests, though note that you may need to handle the display of a CAPTCHA if Google asks you to.

As there are a few OAuth implementations for Android already, you could also try looking at Google's OAuth authentication mechanism — but it actually looks more complex and not as seamless...

Best Answer

Related Solutions

Javascript – Loop inside React JSX

Android – How to implement ClientLogin on Android to access Google services

Related Topic