# @nteract/stateful-components Overview

The @nteract/stateful-components package exports a set of React components that are connected to the Redux and an unconnected set of components.

## Using stateful-components with the nteract core SDK

If you're building a notebook-based application using the nteract core SDK, you can use the connected components to render different components within a notebook, such as Cells and Outputs using the data that is stored in the Redux store.

These connected components are designed to work with the Redux state model that the nteract core SDK uses. In short, it expects that certain properties are stored in particular locations within the Redux subtree.

To use the connected components, you can import each of the components from the `@nteract/stateful-components` package as needed.

```
import { CodeCell } from "@nteract/stateful-components";

class MyApp extends React.Component {
    render() {
        return <CodeCell contentRef={contentRef} id={cellId}>;
    }
}
```

As you can see from the example above, the connected `CodeCell` component expects to receive a `contentRef` and an `id`. The `conntetRef` is a unique ID that is used to refer to the model of a particular notebook in the nteract core Redux state. The `id` is the cell ID that references the cell as it is stored in the nteract core Redux state.

All the connected components expect either a `contentRef` or a `id`. These two pieces of information are used to resolve the correct data from the Redux state and pass it to the component.