What are some examples of using MobX in a React application?

What are some examples of using MobX in a React application?

MobX is a state management library that makes it simple to connect your state to your UI. Here are a few examples:

1. Basic Counter: You can create a simple counter app where the state is managed by MobX.
2. Todo List: Use MobX to manage a todo list, allowing you to add, remove, and toggle tasks.
3. Form Handling: Manage form state with MobX to handle input changes and validation.

Can you show me the code for a basic counter example?

Sure! Here's a simple counter example using MobX:

import React from 'react';
import { observer } from 'mobx-react';
import { makeAutoObservable } from 'mobx';

class CounterStore {
    count = 0;

    constructor() {
        makeAutoObservable(this);
    }

    increment() {
        this.count++;
    }

    decrement() {
        this.count--;
    }
}

const counterStore = new CounterStore();

const Counter = observer(() => {
    return (
        <div>
            <h1>{counterStore.count}</h1>
            <button onClick={() => counterStore.increment()}>Increment</button>
            <button onClick={() => counterStore.decrement()}>Decrement</button>
        </div>
    );
});

export default Counter;

What are the benefits of using MobX over Redux?

MobX offers several benefits over Redux:

1. Simplicity: MobX has a simpler API and requires less boilerplate code.
2. Reactivity: MobX automatically tracks dependencies and updates the UI when the state changes.
3. Performance: MobX can be more performant in certain scenarios due to its fine-grained reactivity.