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:

Leveraging Parallel Computing In Node.js

Leveraging parallel computing in Node.js

Use parallel computing in Node.js with worker threads to optimize performance, handle CPU-intensive tasks, and utilize multi-core processors.

David Omotayo
Feb 13, 2025 â‹… 8 min read

A guide to modern frontend architecture patterns

Frontend architecture is the foundation of your frontend codebase. Here’s how to optimize the pattern that you choose.

Shalitha Suranga
Feb 12, 2025 â‹… 9 min read
A Guide To Graceful Degradation In Web Development

A guide to graceful degradation in web development

Implement graceful degradation in frontend apps by handling failures, mitigating API timeouts, and ensuring a seamless UX with fallbacks.

Rosario De Chiara
Feb 11, 2025 â‹… 4 min read
Building High-Performance Websites Using Htmx And Go

Building high-performance websites using htmx and Go

Use htmx and Go to build high-performance websites, leveraging server-side rendering and minimal JavaScript for fast and efficient applications.

Abhinav Anshul
Feb 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