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:

Interface Segregation Principle

SOLID series: Understanding the Interface Segregation Principle (ISP)

Discover how the Interface Segregation Principle (ISP) keeps your code lean, modular, and maintainable using real-world analogies and practical examples.

Oyinkansola Awosan
Jun 30, 2025 â‹… 7 min read
​​How HTML’s Selectedcontent Element Improves Dropdowns

​​How HTML’s <selectedcontent> element improves dropdowns

is an experimental HTML element that gives developers control over how a selected option is displayed, using just HTML and CSS.

Temitope Oyedele
Jun 27, 2025 â‹… 6 min read
advanced caching in Node.js with Valkey

How to get faster data access in Node.js with Valkey

Learn how to implement an advanced caching layer in a Node.js app using Valkey, a high-performance, Redis-compatible in-memory datastore.

Muhammed Ali
Jun 27, 2025 â‹… 7 min read
how to properly handle rejected promises in TypeScript

How to properly handle rejected promises in TypeScript

Learn how to properly handle rejected promises in TypeScript using Angular, with tips for retry logic, typed results, and avoiding unhandled exceptions.

Lewis Cianci
Jun 26, 2025 â‹… 4 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