How do I set up MobX in my React project?

How do I set up MobX in my React project?

To set up MobX, first install it using npm or yarn. Run npm install mobx mobx-react.

What are the basic steps after installation?

After installation, create a store by defining observable state and actions. Then, use the observer higher-order component to connect your components.

Can you show me a simple example?

Sure! Here's a basic example:

import { observable, action } from 'mobx';
import { observer } from 'mobx-react';

class Store {
  @observable count = 0;

  @action increment() {
    this.count++;
  }
}

const store = new Store();

const Counter = observer(() => (
  <div>
    <p>{store.count}</p>
    <button onClick={() => store.increment()}>Increment</button>
  </div>
));

What are some common pitfalls to avoid?

Common pitfalls include not using observer correctly, which can lead to stale data, and overusing observables, which can complicate your state management.