synchronous access to state values impossible?

I want to do this:

export const [useMyLiteralStore] = create((set: (state:{}) => void) => ({
  literals: '',
  setLiterals: (newLiterals: string) => set((state:{}) => ({ literals: newLiterals })),
}));

const MyReactComp: React.FC<Props> = (Props) => {

  const setLiterals = useMyLiteralStore((state: any) => state.setLiterals);
  const myliterals = useMyLiteralStore((state: any) => state.literals);

  useEffect(() => {
    setLiterals('myTestValue');
console.error("myliterals ", myliterals); //not 'myTestValue' <------- I WANT THIS TO ACTUALLY BE 'myTestValue'
  }, []);

is there a way to achieve what I want? I want to have access to myliterals, after setting it, in a synchronous way like shown above.

What I certainly dont want to do, is hand around my global state in function arguments to side step the problem.

[kfrp]

I know what you’re saying. Hooks and Effects particularly require a shift in approach as to be counterintuitive to linear functional programming. But rendering is not linear and that’s why it’s better to look at functions that use hooks as UI themselves (instead of UI being limited to the JSX they return).

So something like

const mylatestState = useMyHook()

is not equivalent to just getting your state from the store. It’s actually saying something more like:

const mylatestState = theStateThatIsReflectedInMyUI()

If you want the synchronous value thankfully Zustand provides the api for that, and I use it all the time to get and set updated values in contexts that don’t need a re-render first and should be never be out of sync with the store.

But we also do need a way to sync with the UI, and to access values that match the renderstate and not the storestate. All that without being able to see the UI. So hooks are good for that.

Personally I am thankful to move away from all those class components and just have Hooks+Zustand. Even when it doesn’t work the first time(s) I eventually find the right hook+api combo that makes my states and their relationship to various components easier to understand and iterate on.

Sorry if I sound like too much of a cheerleader! I just think the more you use it and use hooks where needed and api where needed, you will be able to leave most of the invalid-state issues behind. 👍

[olavoparno]

I know what you’re saying. Hooks and Effects particularly require a shift in approach as to be counterintuitive to linear functional programming. But rendering is not linear and that’s why it’s better to look at functions that use hooks as UI themselves (instead of UI being limited to the JSX they return).

So something like

const mylatestState = useMyHook()

is not equivalent to just getting your state from the store. It’s actually saying something more like:

const mylatestState = theStateThatIsReflectedInMyUI()

If you want the synchronous value thankfully Zustand provides the api for that, and I use it all the time to get and set updated values in contexts that don’t need a re-render first and should be never be out of sync with the store.

But we also do need a way to sync with the UI, and to access values that match the renderstate and not the storestate. All that without being able to see the UI. So hooks are good for that.

Personally I am thankful to move away from all those class components and just have Hooks+Zustand. Even when it doesn’t work the first time(s) I eventually find the right hook+api combo that makes my states and their relationship to various components easier to understand and iterate on.

Sorry if I sound like too much of a cheerleader! I just think the more you use it and use hooks where needed and api where needed, you will be able to leave most of the invalid-state issues behind.

Well said, mister, I completely misunderstood @Jossnaz question. This is all about hook’s lifecycle. This article here explains it very well https://overreacted.io/a-complete-guide-to-useeffect/