2022-04-08
3206
#react#rxjs
Ebenezer Don
9298
Apr 8, 2022 â‹… 11 min read

RxJS with React Hooks for state management

Ebenezer Don Full-stack software engineer with a passion for building meaningful products that ease the lives of users.

Recent posts:

When is low-code the right choice? Here’s how to decide

Not sure if low-code is right for your next project? This guide breaks down when to use it, when to avoid it, and how to make the right call.

Popoola Temitope
Jul 11, 2025 â‹… 7 min read
Comparing AI App Builders — Firebase Studio vs. Lovable vs. Replit. LogRocket Article

Comparing AI app builders — Firebase Studio vs. Lovable vs. Replit

Compare Firebase Studio, Lovable, and Replit for AI-powered app building. Find the best tool for your project needs.

Emmanuel John
Jul 11, 2025 â‹… 7 min read
Gemini CLI tutorial — Will it replace Windsurf and Cursor?

Gemini CLI tutorial — Will it replace Windsurf and Cursor?

Discover how to use Gemini CLI, Google’s new open-source AI agent that brings Gemini directly to your terminal.

Chizaram Ken
Jul 10, 2025 â‹… 8 min read
React & TypeScript: 10 Patterns For Writing Better Code

React & TypeScript: 10 patterns for writing better code

This article explores several proven patterns for writing safer, cleaner, and more readable code in React and TypeScript.

Peter Aideloje
Jul 10, 2025 â‹… 11 min read
View all posts

16 Replies to "RxJS with React Hooks for state management"

  1. It was a clear, straight to the point and easy to follow article, thanks.
    One thing I’d like to suggest to improve the code is to handle the cleanup of the subscriptions inside the useLayoutEffect() hooks:

    // src/components/{FirstPerson,SecondPerson}.js
    useLayoutEffect(() => {
    const subs = chatStore.subscribe(setChatState)
    chatStore.init()

    return function cleanup(){ subs.unsubscribe() }
    }, [])

    Thanks again

  2. Hi Luciano, I’m glad you found the article helpful and thanks a lot for pointing out the cleanup function.

    I’ll also update the GitHub repo with the changes.

  3. I work with Angular at my job where RxJs is used heavily. It’s great to see RxJs being adopted in the react community.

    We have an upcoming project where we need to demo a tool. I’m going to give React + RxJS + Hooks a try. Thank you for this guide!

  4. Thanks Ebenezer for this tutorial. It did help me clear some doubts. Apparently I’m facing some problems/issues. This tutorial works like a charm when executed for the first time, but when you do a browser page refresh, I don’t the expected values/messages from chatStore. I always get the initialState values that we initialized earlier. Not understanding what silly mistake I’m doing here.

    Any help would be highly appreciated. Thanks in advance.

  5. If you refresh the browser you’ll lose everything because the data is never saved to any kind of storage, you’ll need to use a db or localStorage if you want to persist the data

  6. great article. all is working as expected, but in the console getting warnings:

    index.js:1 Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in SecondPerson (created by Context.Consumer)

  7. Thanks for your helpful tutorial but i have a question, Why init the state inside useLayoutEffect while u can just init it in useState(chatStore.initialState)?

  8. Separate things… this article is not about database. It shows an lightwight way to handle state. For big apps look at redux flux…you will see a lot of boilerplate.

Leave a Reply