Using BLoC Pattern with React - Deepstash
Machine Learning With Google

Learn more about computerscience with this collection

Understanding machine learning models

Improving data analysis and decision-making

How Google uses logic in machine learning

Machine Learning With Google

Discover 95 similar ideas in

It takes just

14 mins to read

Business Logic Component

Initially, the Business Logic Component (BLoC) pattern was introduced by Google as a solution to handle states in Flutter applications. It allows you to reduce the workload on UI components by separating the business logic from them.


314 reads

Benefits of Using BLoC Pattern with React

The concept behind the BLoC pattern is straightforward. As you can see in the above figure, business logic will be separated from UI components. First, they will send events to the BLoC using an observer. And then, after processing the request, UI components will be notified by the BLoC using observables.


91 reads

1. Flexibility to update application logic

When the business logic is standalone from UI components, the impact on the application will be minimum. You will be able to change the business logic any time you want without affecting the UI components.


74 reads

2. Reuse logic

Since the business logic is in one place, UI components can reuse logic without duplicating the code so that the simplicity of the app will increase.


41 reads

3. Ease of testing

When writing test cases, developers can focus on the BLoC itself. So the code base is not going to be messed up.


39 reads

4. Scalability

Over time, application requirements may change, and business logic can keep growing. In such situations, developers can even create multiple BLoCs to maintain the clarity of the codebase.

Moreover, BLoC patterns are platform and environment independent so that developers can use the same BLoC pattern in many projects.


27 reads

<ul><li>Blocs — Keep all the b...

  • Blocs — Keep all the bloc classes we need.
  • Components — Keep the UI components.
  • Utils — Keep utility files of the project.


39 reads

Step 02: Implementation of the BLoC.

Now, let’s implement the BLoC class. The BLoC class will be responsible for implementing all subjects related to business logic. In this example, it is responsible for the counter logic.

So, I have created a file named CounterBloc.js inside the bloc directory and used a pipe to pass the counter to the UI components.

There is simple logic in this class. However, when an app grows in size, imagine the complexity if we do not separate the business logic.


18 reads

Step 03: Adding more beauty to the BLoC by an intermediate clas

In this step, I will create the StreamBuilder.js inside the utils directory to handle the counter request from the UI. Moreover, developers can handle errors and implement customer handlers within this.

In the AsyncSnapshot class, we can initialize a constructor, handle our data (check availability, etc. ), and handle errors. But in this example, I have only returned the data for ease of demonstration.

The initial data is passed into AysncSnapshot class and stored in the snapshot state for each subscription. Then it will get rendered in the UI components.


12 reads

Step 04: Implementing UI components.

As you can see now, increase() and decrease() methods are called directly within the UI component. However, output data is handle by a stream builder.

It is better to have an intermediate layer to implement custom handlers to handle errors.

In the app.js file, the BLoC is initialized using the CounterBloc class. Thus, the Counter component is used by passing the BLoC as a prop.

That’s it. Now you can treat your business logic as a separate entity outside your UI components and change it as you need.


20 reads



#engineering, #machinelearning and #crypto


Explore the World’s

Best Ideas

200,000+ ideas on pretty much any topic. Created by the smartest people around & well-organized so you can explore at will.

An Idea for Everything

Explore the biggest library of insights. And we've infused it with powerful filtering tools so you can easily find what you need.

Knowledge Library

Powerful Saving & Organizational Tools

Save ideas for later reading, for personalized stashes, or for remembering it later.

# Personal Growth

Take Your Ideas


Organize your ideas & listen on the go. And with Pro, there are no limits.

Listen on the go

Just press play and we take care of the words.

Never worry about spotty connections

No Internet access? No problem. Within the mobile app, all your ideas are available, even when offline.

Get Organized with Stashes

Ideas for your next work project? Quotes that inspire you? Put them in the right place so you never lose them.


2 Million Stashers


5,740 Reviews

App Store


72,690 Reviews

Google Play

Sean Green

Great interesting short snippets of informative articles. Highly recommended to anyone who loves information and lacks patience.

Ashley Anthony

This app is LOADED with RELEVANT, HELPFUL, AND EDUCATIONAL material. It is creatively intellectual, yet minimal enough to not overstimulate and create a learning block. I am exceptionally impressed with this app!


Don’t look further if you love learning new things. A refreshing concept that provides quick ideas for busy thought leaders.

Shankul Varada

Best app ever! You heard it right. This app has helped me get back on my quest to get things done while equipping myself with knowledge everyday.

Laetitia Berton

I have only been using it for a few days now, but I have found answers to questions I had never consciously formulated, or to problems I face everyday at work or at home. I wish I had found this earlier, highly recommended!

Giovanna Scalzone

Brilliant. It feels fresh and encouraging. So many interesting pieces of information that are just enough to absorb and apply. So happy I found this.

Jamyson Haug

Great for quick bits of information and interesting ideas around whatever topics you are interested in. Visually, it looks great as well.

Ghazala Begum

Even five minutes a day will improve your thinking. I've come across new ideas and learnt to improve existing ways to become more motivated, confident and happier.

Read & Learn

20x Faster





Access to 200,000+ ideas

Access to the mobile app

Unlimited idea saving & library

Unlimited history

Unlimited listening to ideas

Downloading & offline access

Personalized recommendations

Supercharge your mind with one idea per day

Enter your email and spend 1 minute every day to learn something new.


I agree to receive email updates