# Patterns

Patterns — Legend State documentation.

Source: https://legend.so/state/v3/guides/patterns/

Legend State v3 documentation. Current documentation version.

## [Many atoms vs. one large store](https://legend.so/state/v3/guides/patterns/#many-atoms-vs-one-large-store)

Legend-State can be used however you want. If your team prefers one large state object containing all app state, that's great! Or you may prefer to have multiple different individual atoms in their own files, which works too. Here's some examples of ways to organize your state.

### [One large global state](https://legend.so/state/v3/guides/patterns/#one-large-global-state)

```js
const store$ = observable({
    UI: {
        windowSize: undefined as { width: number, height: number },
        activeTab: 'home' as 'home' | 'user' | 'profile',
        ...
    },
    settings: {
        theme: 'light' as 'light' | 'dark',
        fontSize: 14,
        ...
    },
    todos: [] as TodoItem[]
})
```

### [Multiple individual atoms](https://legend.so/state/v3/guides/patterns/#multiple-individual-atoms)

```ts
// Settings
export const theme$ = observable('light')
export const fontSize$ = observable(14)

// UIState
export const uiState$ = observable({
    windowSize: undefined as { width: number, height: number },
    activeTab: 'home' as 'home' | 'user' | 'profile',
})
```

### [Within React components](https://legend.so/state/v3/guides/patterns/#within-react-components)

You can use `useObservable` to create state objects within React components, then pass them down to children through either props or Context.

```js
import { Memo } from "@legendapp/state/react";

function App() {
  const store$ = useObservable({
    profile: { name: "hi" },
  });

  return (
    <div>
      <Profile profile={store$.profile} />
    </div>
  );
}

function Profile({ profile }) {
  return <div><Memo>{profile.name}</Memo></div>;
}
```

[View Markdown](https://legend.so/state/v3/guides/patterns.md)[Report a documentation correction](https://github.com/LegendApp/legend-docs/issues/new?title=Docs%3A+Patterns&body=Page%3A+https%3A%2F%2Flegend.so%2Fstate%2Fv3%2Fguides%2Fpatterns%0A%0AWhat+is+incorrect+or+missing%3F%0A%0AExpected+behavior+or+supporting+source%3A%0A)