Dynamically do something after a useState variable has been set?

This depends largely on what "do something" you want to do, in response to a state change.

• If you just need to re-compute some other state: Write that as additional code in the component function.

• If you need to have an effect on some external system: The useEffect hook is designed for this purpose.

useEffect is a React Hook that lets you synchronize a component with an external system.

To create the hook, you provide two arguments:

• setup: The function to call, to set up the external effect. If clean-up is needed when the effect should stop, this function returns that clean-up function.
• dependencies (optional): The specific collection of state variables that should trigger this effect.

Note that the React documentation also warns: You might not need an Effect.

In particular, you don't need to use an Effect simply to "do something" internal to the component. You just write that "do something" into the main code of the function; it is called every time to render the component.

Rather, the purpose of useEffect is when your "do something" is specifically to have an effect external to the component itself.

posted 24 days ago

CC BY-SA 4.0

24d ago

bignose‭

31 reputation 0 2 3 11

useEffect(() => {
  // do something
}, [myVar]);

posted about 1 month ago

CC BY-SA 4.0

1mo ago

propatience‭

55 reputation 5 5 3 12