Chris Smothers

[Homebase React](https://github.com/homebaseio/homebase-react) v0.5.0 simplifies relationships by automatically normalizing nested JSON transactions.

Now you can write

```jsx
transact([
  { todo: { name: 'T1', project: { name: 'P1' } }
])
```

Which is equivalent to

```jsx
transact([
  { project: { id: -1, name: 'P1' }, 
  { todo: { name: 'T1', project: -1} }
])
```

In addition to simplifying the API for transactions we’ve also simplified schema maintenance. 

Homebase React requires a schema on read to support relationships. Basically, instead of joining data at query time like in SQL, you specify how attributes are related up front so queries can be simpler.  

With nested JSON transaction we can detect relationships at transaction time. This allows us to prompt you to add the correct schema if it’s missing. So even if you’re new to normalized data we’ll guide you to some reasonable defaults.

```jsx
const config = {}

<HomebaseProvider config={config} />

transact([{ item: { child: { name: 'A' }}}])
// Throws =>
`
Error: The 'item.child' attribute should be a ref type of one.

Add this to your config:  schema: { item: { child: { type: 'ref', cardinality: 'one' }}}
`
```

And of course you can easily traverse your graph with `entity.get`

```jsx
const [t1] = useEntity({ todo: { name: 'T1' } })
t1.get('project', 'name') // => 'P1'
```

## Arrays

In addition to nested JSON objects we’ve added support for one level of nested arrays. It’s not full JSON support, no arrays of arrays `[[1]]`, but it’s pretty close. 

```jsx
transact([{ 
  project: { 
    name: 'P1', 
    numbers: [1, 2, 3],
    todos: [
      { todo: { name: 'T1' } },
      { todo: { name: 'T2' } }
    ]
  } 
}])
```

To access array elements we’ve added several helpful features to the get API.

### Get array index

```jsx
const [p1] = useEntity({ project: { name: 'P1' } })
p1.get('numbers', 0, 'value') // => 1
p1.get('todos', 0, 'ref', 'name') // => 'T1'
```

### Implicit map over attribute

Omitting an index on an array type will automatically cause the next attributes to be mapped over all items in the array.

```jsx
const [p1] = useEntity({ project: { name: 'P1' } })
p1.get('numbers', 'value') // => [1, 2, 3]
p1.get('todos', 'ref', 'name') // => ['T1', 'T2']
```

### Array attributes

You probably noticed the the attributes `'value'` and `'ref'`. These are special attributes on arrays. If an array element is a value like a string or a number you can access it with the value attribute. If an array element is a reference to a related entity then you can get that entity with the ref attribute.

### Array order

Arrays also have a special `'order'` attribute that contains a number representing the sort order of an array element. You can update this attribute to reorder an array.

```jsx
const [p1] = useEntity({ project: { name: 'P1' } })
p1.get('numbers', 'value') // => [1, 2, 3]
p1.get('numbers', 0, 'order') // => 1
p1.get('numbers', 1, 'order') // => 2
transact({ 'homebase.array': {
  id: p1.get('numbers', 2, 'id'),
  order: 1.5
}})
p1.get('numbers', 'value') // => [1, 3, 2]
```


cover@4x

Homebase React 0.5.0 | JSON Derived Relationships

At Homebase, we think **a lot** about [client-side data](https://github.com/homebaseio/homebase-react). One problem we wonder about is the complexity of state management libraries. Redux was a huge step forward when it came on the scene. It forced us to think about how we mutate and subscribe to changes in our data along with giving us places to put that code. Over time, however, we realized we might have too many places to put that code... 

> I don’t like Redux very much, but this sounds like the opposite of its problems? With Redux, you *do* know deterministically where the code lies because you can follow the reducer chain. The problem is that what should’ve been local often becomes global.
> 
> — Dan Abramov (@dan_abramov) [March 22, 2020](https://twitter.com/dan_abramov/status/1241756566048694272)

*Even the co-creator of Redux, Dan Abramov, sounds ready for the next stage in state management.*

Luckily for us, over the past few years programmers have created several new approaches to state management. In this post, we share our research on the trends in post-Redux state management and how we tried to incorporate the best parts of existing libraries into one solution. We hope you find a new library to play with and maybe even use in production.

## Trends

We went through the most popular state management libraries and analyzed what developers wanted to see in their state management libraries. Below are some trends we got excited about:

### Simple API

Ever since Redux, we and developers we've spoken to craved a simpler way to handle state. It makes sense that most state management alternatives we looked at prioritized simplicity. [Zustand](https://github.com/pmndrs/zustand) really shines here, seeming to prioritize a simple API above all else.

```jsx
import create from 'zustand'

const useStore = create(set => ({
  bears: 0,
  increasePopulation: () => set(state => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 })
}))
```

*A code example from Zustand.*

### Declarative

Another way to make code simpler is to make it [declarative](https://en.wikipedia.org/wiki/Declarative_programming). This is the main selling point of [Cerebral](https://cerebraljs.com). While we are huge fans of simplicity through declarative programming, we found Cerebral more complicated than we'd like.

```jsx
import * as React from 'react'
import { connect } from '@cerebral/react'
import { state, sequences } from 'cerebral'

export default connect(
  {
    inputValue: state`inputValue`,
    changeInputValue: sequences`changeInputValue`
  },
  class MyComponent extends React.Component {
    componentDidMount() {
      this.props.reaction(
        'focusUsername',
        {
          error: state`usernameError`
        },
        ({ error }) => error && this.input.focus()
      )
    }
    render() {
      return (
        <input
          ref={(node) => {
            this.input = node
          }}
          value={this.props.inputValue}
          onChange={(event) =>
            this.props.changeInputValue({ value: event.target.value })
          }
        />
      )
    }
  }
)
```

*A code example from Cerebral.*

### Hooks

React hooks are another path to simplicity since they eliminate the amount of concepts you need to remember when writing React applications. With the advent of React Hooks, we saw libraries  such as [Zustand](https://github.com/pmndrs/zustand) and [Unstated](https://github.com/jamiebuilds/unstated) start to use hooks for state management.

```jsx
function useCounter(initialState = 0) {
  let [count, setCount] = useState(initialState)
  let decrement = () => setCount(count - 1)
  let increment = () => setCount(count + 1)
  return { count, decrement, increment }
}

let Counter = createContainer(useCounter)

function CounterDisplay() {
  let counter = Counter.useContainer()
  return (
    <div>
      <button onClick={counter.decrement}>-</button>
      <span>{counter.count}</span>
      <button onClick={counter.increment}>+</button>
    </div>
  )
}
```

*A code example from Unstated.*

### Server State

One of the developments we're most excited about in the state management space is the acknowledgement of "server state". Both [Recoil](https://recoiljs.org/docs/guides/asynchronous-data-queries/) and [React Query](https://react-query.tanstack.com/overview) try to make it easy to integrate client state with your server state using Asynchronous data queries. The trade-off ends up being added complexity.

```jsx
const currentUserNameQuery = selector({
  key: 'CurrentUserName',
  get: async ({get}) => {
    const response = await myDBQuery({
      userID: get(currentUserIDState),
    });
    return response.name;
  },
});

function CurrentUserInfo() {
  const userName = useRecoilValue(currentUserNameQuery);
  return <div>{userName}</div>;
}
```

*A code example from Recoil.*

## Putting it all together

Looking at these trends we are more excited than ever about front-end development and decided to throw our hat in the ring with a state management library of our own. We wanted the simplicity of a library like Zustand with the power of a library like Recoil. 

So, in a month we ended up creating a state management library around the local-first database we are working on and voila: very simple, imperative code, but with the functionality of a relational graph database right at your finger tips in the client.

As for "server state", we are working on automatic syncing client and server data via a [CRDT](https://en.wikipedia.org/wiki/Conflict-free_replicated_data_type).

It's already integrated into several applications, but we'd love to hear your thoughts on [Homebase React](https://github.com/homebaseio/homebase-react).

```jsx
const Counter = () => {
  const [counter] = useEntity({ identity: 'counter' })
  const [transact] = useTransact()
  return (
    <div>
      Count: {counter.get('count')}
      <div>
        <button onClick={() => transact([{
          counter: {
            id: counter.get('id'),
            count: counter.get('count') + 1
          }
        }])}>
          Increment
        </button>
      </div>
    </div>
  )
}
```

*A code example from Homebase React.*

## Conclusion

We hope this was helpful! The chart below summarizes what we discussed and does a breakdown of what features each library has prioritized.

### State management feature comparison

|Library    |Client State|Declarative|Server state|Simpler|Hooks|
|-----------|:------------:|:-----------:|:------------:|:--------------------:|:-----:|
|Cerebral   |✓           |✓          |            |                    |     |
|Zustand    |✓           |           |            |✓                   |✓    |
|Unstated   |✓           |           |            |✓                   |     |
|Recoil     |✓           |           |✓           |                    |     |
|React Query|            |           |✓           |                    |     |
|Redux      |✓           |           |            |                    |✓       |
|Homebase   |✓           |✓          |✓           |✓                   |✓    |
|MobX       |            |           |            |✓                   |     |
|Overmind   |            |           |            |✓                   |     |
|Freactal   |            |           |            |✓                   |     |

#### Notes: 
* Redux does have middleware to try to incorporate server state.
* Unstated has unreleased React hooks.


Blog

Homebase React 0.5.0 | JSON Derived Relationships

State Management Beyond Redux