Setting different initial values

By default, all the destructured variables from useObserver have the same initial value. To set different initial values for each variable, you have a couple of options:

1. Define initial values at once:

If you want to set initial values for all the destructured variables at once, you can use the observer.set method before calling the useObserver hook:


import { observer, useObserver } from 'rosma';

observer.set({ count: 10, count1: 20 });

export default function Counts() {
  const { count, setCount, count1, setCount1 } = useObserver();

  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <button onClick={() => setCount1(count1 + 1)}>{count1}</button>
    </>
  );
}


import { observer, useObserver } from 'rosma';

type State = {
  count: number;
  count1: number;
};

observer.set<State>({ count: 10, count1: 20 });

export default function Counts() {
  const { count, setCount, count1, setCount1 } = useObserver<State>();

  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <button onClick={() => setCount1(count1 + 1)}>{count1}</button>
    </>
  );
}

In the above code, we are setting the initial values for count and count1 using the observer.set before calling the useObserver hook. This allows us to destructure the variables without passing any arguments to the useObserver hook, and the variables will have the initial values we specified using the observer.set.

2. Assign initial values to the variable itself:


import { useObserver } from 'rosma';

export default function Counts() {
  const { count = 10, setCount, count1 = 20, setCount1 } = useObserver();

  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <button onClick={() => setCount1(count1 + 1)}>{count1}</button>
    </>
  );
}


import { useObserver } from 'rosma';

type State = {
  count: number;
  count1: number;
};

export default function Counts() {
  const { count = 10, setCount, count1 = 20, setCount1 } = useObserver<State>();

  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <button onClick={() => setCount1(count1 + 1)}>{count1}</button>
    </>
  );
}

3. Define initial values separately:


import { useObserver } from 'rosma';

export default function Counts() {
  const { count, setCount } = useObserver(10);
  const { count1, setCount1 } = useObserver(20);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <button onClick={() => setCount1(count1 + 1)}>{count1}</button>
    </>
  );
}


import { useObserver } from 'rosma';

type State = {
  count: number;
  count1: number;
};

export default function Counts() {
  const { count, setCount } = useObserver<State>(10);
  const { count1, setCount1 } = useObserver<State>(20);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <button onClick={() => setCount1(count1 + 1)}>{count1}</button>
    </>
  );
}

Demo

In the above code, we have created two separate useObserver hooks to define different initial values for count and count1.

Overall, destructuring multiple variables from useObserver can help make your code more concise and readable, and setting different initial values for each variable is easy using the methods described above.

Keywords: Rosma, useObserver, Destructuring variables, Initial values, Observer.set, React hooks, Code optimization, Code readability, State management, Front-end development

Previous: Multiple destructuring

Next: useObserver hook