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:

is OpenNext really the key to Next.js portability

Is OpenNext really the key to Next.js portability?

There’s been major controversy surrounding Next.js’s openness. Discover how OpenNext is addressing the bubbling issue of Next.js portability.

Elijah Asaolu
Apr 30, 2025 â‹… 5 min read

Solid series: Single Responsibility Principle (SRP)

By using SRP, developers can produce code that is easier to debug, test, and extend, making it clearer, more maintainable, and scalable.

Oyinkansola Awosan
Apr 30, 2025 â‹… 8 min read
axios post requests

Axios POST requests: Handling errors, authentication, & best practices

Learn about the Axios POST method and discover how to deploy it in vanilla JavaScript and frameworks like React.

Chimezie Innocent
Apr 29, 2025 â‹… 16 min read
creating server-driven web apps with htmx

Creating server-driven web apps with htmx

Explore htmx, a small browser-oriented JavaScript library aimed at building no-nonsense, server-driven web apps.

Elijah Asaolu
Apr 29, 2025 â‹… 16 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