Micro State Management with React Hooks

This is the code repository for Micro State Management with React Hooks, published by Packt.

Explore custom hooks libraries like Zustand, Jotai, and Valtio to manage global states

What is this book about?

State management is one of the most complex concepts in React. Traditionally, developers have used monolithic state management solutions. Thanks to React Hooks, micro state management is something tuned for moving your application from a monolith to a microservice.

This book covers the following exciting features:

• Understand micro state management and how you can deal with global state
• Build libraries using micro state management along with React Hooks
• Discover how micro approaches are easy using React Hooks
• Understand the difference between component state and module state
• Explore several approaches for implementing a global state

If you feel this book is for you, get your copy today!

Instructions and Navigations

All of the code is organized into folders. For example, Chapter02.

The code will look like the following:

const Component = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      {count}
      <button onClick={() => setCount((c) => c + 1)}>
        +1
      </button>
    </div>
  );
};

Following is what you need for this book: If you're a React developer dealing with complex global state management solutions and want to learn how to choose the best alternative based on your requirements, this book is for you. Basic knowledge of JavaScript programming, React Hooks and TypeScript is assumed.

With the following software and hardware list you can run all code files present in the book (Chapter 1-11).

Software and Hardware List

Related products

• Simplify Testing with React Testing Library [Packt] [Amazon]

• Designing React Hooks the Right Way [Packt] [Amazon]

Errata

• Page 151 (code snippet 3 ,line 1): const Counter = ({ countAtom }) => { should be const Counter = () => {
• Page 59 (Paragraph 3, line 2): This is because Contexts hold only primitive values. Should be ignored and removed which is wrong explanation of the code.
• Page 37 (code snippet 3, line 13): console.log(container1.addBase(2)); // shows "3" Should be console.log(container1.addBase(2)); // shows "12".
• Page 37 (code snippet 3, line 14): console.log(container1.addBase(2)); // shows "12" Should be console.log(container1.addBase(2)); // shows "3".
• Page 14 (code snippet 1, line 3): onClick={() => { state.count = 1; setState(state); } Should be onClick={() => { state.count = 1; setState(state); }}.
• Page 21 (code snippet 2, line 2): typeof action === 'function' ? action(prev): prev; Should be typeof action === 'function' ? action(prev): action;.

Get to Know the Author

Daishi Kato is a software engineer who is passionate about open-source software. He had been a researcher on peer-to-peer networks and web technologies for decades. His interest has been in engineering, and he has been working with startups for the last 5 years. He has been actively involved in OSS since the ’90s, and his latest work focuses on developing various libraries with JavaScript and React.