How to tell useEffect to track substate

import React, { useEffect } from "react";
import { useState } from "@hookstate/core";

const Component = () => {
  const state = useState({ foo: 1, bar: 2 });

  // will trigger when state.bar changes, which is wrong
  useEffect(() => {
    console.log(state.foo.get());
  }, [state.foo]);


  // will trigger only when state.foo changes, which is good
  useEffect(() => {
    console.log(state.foo.get());
  }, [state.foo.value]); // but eslint complains state.foo is a dependency that was not listed here

  return (
    <>
      <h1>Hello dude {state.bar.get()}</h1>
      <button onClick={() => state.bar.set(p => p+1)}>
        Update state.bar
      </button>
      <button onClick={() => state.foo.set(p => p+1)}>
        Update state.foo
      </button>
      
    </>
  );
};

export default Component;

I have this code, leaving just state.foo in my dep array will make the effect trigger always, but it I put state.foo.value in dep array it will work, but eslint complains about state.foo being a dependency not listed, I can disable the warning with // eslint-disable-next-line react-hooks/exhaustive-deps though

[hp8wvvvgnj6asjm7]

cool, what I needed.

[avkonst]

Hi,

Yes, I am aware about this. Most of the time I handled it by ignoring the eslint warning. It is OK, because values returned by hookstate state.get() are always the latest no matter when it was captured in an effect or somewhere else.

However, in your particular case, I think the eslint warning will go away if you do this: console.log(state.foo.value); - use value instead of get inside of the useEffect callback. I have not checked it. Please let me know.