Multiple destructuring

In Rosma, you can easily destructure multiple variables at once from the object returned by the useObserver hook. This can make your code more concise and easier to read.

Here's an example:


import { useObserver } from 'rosma';

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

  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, count1, setCount1 } = useObserver<State>(0);

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

Demo

In the above code, we are destructuring count, setCount, count1, and setCount1 variables from the useObserver hook. This allows us to directly use these variables in our component without needing to access them through the observer object.

Keywords: Rosma, observer, useObserver, Destructuring variables, State management, Front-end development, Code optimization, Code readability, React hooks, Multiple variables, Variable assignment

Previous: Usage

Next: Different initial values