constate, light weight state management in React
Tags: react, hooks
Published: 2019-02-24 05:36:18

---
title: constate, light weight state management in React
published: true
description: Exploration of state management in React using hooks and constate
tags: react, hooks
---

### Introduction

Now that hooks have been released, I believe that we will see patterns emerge and the community will find hooks solving problems and simplifying code. This article is a basic introduction to [constate](https://github.com/diegohaz/constate), a light weight solution to state management that takes advantage of hooks. Please feel free to comment below on what you think of the topic and the library. Please keep the discussion civil, thank you!

### Simple API + Hooks

The API of the library is very simple. We have one function that we will be using called createContainer and then we will be using built in hooks to do the rest. It is not very opinionated in a lot of ways which makes it flexible to the users desired style and organization. The simple (and incredibly trivial) example below shows how it works.

```javascript
import React from "react"
import createContainer from "constate"

// Our custom hook that returns what will be available in our context
function useText() {
    const [text, setText] = React.useState('hello')

    const changeLang = () => {
        setText('hola')
    }
    
    return {
        text,
        changeLang,
    }
}

// Our container
const TextContainer = createContainer(useText)

// we now use the useContext hook to pull out the Context
function TextButton() {
    const { changeLang } = React.useContext(TextContainer.Context)
    return <button onClick={changeLang}>Change</button>
}

function TextBox() {
    const { text } = React.useContext(TextContainer.Context)
    return <h1>{text}</h1>
}

// the Container has a provider on it that we need to wrap our components in
function App() {
    return (
        <TextContainer.Provider>
            <TextButton />
            <TextBox />
        </TextContainer.Provider>
    )
}
```
### The Todo List Example

Yes I made a todo list. I do apologize if this makes you sad :weary:. I will make more original examples in the future :sunglasses:. In the meantime let's check it out.

```javascript
// This is the useTodos custom hook that will be passed to createContainer
import React from 'react';

const useTodos = () => {
    const [ todos, setTodos ] = React.useState([]);
    const [ val, setVal ] = React.useState('')
    
    const addTodo = () => {
        setTodos([ val, ...todos ]);
        setVal('');
    }

    const updateForm = (e) => {
        setVal(e.target.value);
    }

    return {
        todos, 
        val, 
        addTodo, 
        updateForm
    }
}

export default useTodos;
```
Notice above how I could have approached it in different ways. I could have had one useState call that held all of the state, or I could have used useReducer if I wanted something resembling Redux. This shows the flexibility that the library offers.

Here is one of the components to show how to access the state and functions. Using destructuring, I can pull off all of the values and functions that this component needs. The other components access the state in the same way.

```javascript
import React from 'react';
import TodoContainer from './TodoContainer';

const TodoInput = () => {
    const {val, updateForm, addTodo} = React.useContext(TodoContainer.Context);
    return (
        <div>
            <input value={val} onChange={updateForm}/>
            <button onClick={addTodo}>ADD</button>
        </div>
    );
}

export default TodoInput;
```

Find the rest of the code here. Consider checking out constate and explore hooks in your next project. Thank you for taking the time to read this!

{% github ChrisWcs/examples_of_constate %}