# Patterns

Patterns — Legend State documentation.

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

Legend State v2 documentation. **Archived version.** [Read the current documentation.](https://legend.so/state/v3/intro/introduction/)

## [Many atoms vs. one large store](https://legend.so/state/v2/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/v2/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/v2/guides/patterns/#multiple-individual-atoms)

```js
// settings.ts
export const theme$ = observable('light')
export const fontSize$ = observable(14)

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

### [Within React components](https://legend.so/state/v2/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
function App() {
  const store$ = useObservable({
    profile: { name: "hi" },
  });

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

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

[View Markdown](https://legend.so/state/v2/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%2Fv2%2Fguides%2Fpatterns%0A%0AWhat+is+incorrect+or+missing%3F%0A%0AExpected+behavior+or+supporting+source%3A%0A)