DEV Community: Majd-sufyan

System Design Learning Journey — Week 1: Scalability & URL Shortener

Majd-sufyan — Thu, 26 Mar 2026 13:13:48 +0000

Over the next 12 weeks, I’m focusing on one goal:

Becoming more confident in system design by going beyond theory and applying it in practice.

I’ll be documenting everything I learn — the concepts, the mistakes, and the design decisions.

Each week focuses on a different topic, with a real system to apply it.

Week 1 — Scalability Basics & Designing a URL Shortener

Overview

In Week 1 of my system design learning plan, I focused on foundational scalability concepts and applied them by designing and implementing a URL shortener system.

The goal was not just to design a working system, but to:

Build intuition for data-intensive systems
Practice thinking in trade-offs
Connect

Key Learnings from Designing Data-Intensive Applications — Chapter 1

Data-Intensive vs Compute-Intensive Systems

Most modern applications are data-intensive, meaning the primary challenges are:

Volume of data
Speed of change
Access patterns (reads vs writes)

CPU is rarely the bottleneck.

This shifted my thinking from “what framework should I use?” to:

What data do I store?
How often is it accessed?
What guarantees does it need?

This mindset directly influenced how I designed the URL shortener.

Reliability, Scalability, and Maintainability

Chapter 1 emphasizes that failures are inevitable, but systems should be designed so faults don’t become failures.

Key takeaways:

Fault tolerance matters even for “simple” systems
Scalability is about how systems behave as load increases
Maintainability is critical because most software costs are long-term

These principles guided decisions like stateless services, caching, and asynchronous processing.

Load Balancing Fundamentals

A load balancer solves two core problems:

Availability — no single server failure brings the system down
Scalability — traffic can be distributed across multiple instances

Important insights:

Load balancers require stateless application servers
Distribution strategies (round-robin, least connections) affect latency
Health checks are essential to avoid routing traffic to failed instances

URL Shortener — System Design

Functional Requirements

Accept long URLs
Generate unique short keys
Redirect users to the original URL
Store mappings reliably

Non-Functional Requirements

Low latency (read-heavy workload)
High availability
Scalability
Fault tolerance
Optional analytics

High-Level Architecture

Figure 1: High-level request flow for URL creation, redirection, and analytics.

The system consists of:

Stateless API servers behind a load balancer
PostgreSQL for persistent storage
Redis for low-latency reads
Asynchronous analytics processing

Redirects are optimized for speed, while analytics are handled in the background.

Design Improvement: Asynchronous Analytics

Initial Approach (Synchronous)

Initially, redirect analytics were updated synchronously inside the redirect request:

val mapping = repository.findByShortUrl(shortUrl)
mapping.redirectCount +=1
repository.save(mapping)
return RedirectToOriginalResponse(mapping.originalUrl)

Problem:

The user waits for a database write that provides no immediate value.

Timeline:

UserRequest
→DBRead(10ms)
→DBWrite(10ms)
→Response

Total ≈20ms

Improved Approach (Asynchronous)

After revisiting DDIA’s discussion on latency and performance, I moved analytics updates to run asynchronously.

Now:

Redirect happens immediately
Analytics are processed in the background
Redirects remain fast even if analytics fail

Timeline:

User Request
→ DBRead (10ms)
→ Async event / queue
→ Response

User latency ≈10ms

Why This Matters

This change:

Reduced redirect latency by ~50%
Improved resilience
Accepted eventual consistency where strict accuracy isn’t required

A key system design principle reinforced here:

Not all data needs the same consistency guarantees.

Implementation

The system was implemented using:

Kotlin + Spring Boot
PostgreSQL for persistence
Redis for caching
Asynchronous analytics processing

📌 Source code:

👉 https://github.com/Majd-sufian/12-week-System-Design-Learning-Plan/tree/main/url-shorten-project

Reflections

This week helped me:

Shift from component-level thinking to system behavior thinking
Make explicit design trade-offs
Connect theory (DDIA) to real implementation decisions

Designing even a “simple” system like a URL shortener revealed how quickly concerns like latency, fault tolerance, and scalability appear.

What’s Next — Week 2

Deeper dive into databases
Data modeling & indexing
Designing read-heavy systems under higher load

The Easiest Way to Get OpenAI Keys for Free

Majd-sufyan — Fri, 30 Aug 2024 12:31:00 +0000

Ever wondered how some people get their hands on OpenAI API keys without breaking a sweat? Well, a quick look at GitHub might give you the answer! 😅

Check out this image—someone accidentally pushed their OpenAI API key right into their GitHub repo. It’s a common mistake, but it means anyone who finds it can grab that key and use it for free. Yep, just like that.

But seriously, don’t do this! To avoid leaking your own keys:

Use environment variables instead of hardcoding them.
Add .env files to your .gitignore so they don’t get uploaded.
Scan your repos for secrets with automated tools.
Rotate your keys if they ever get exposed.

Stay safe out there, and keep those keys hidden! 🔒

Explore My Portfolio and Share Your Feedback! 🕺

Majd-sufyan — Tue, 27 Aug 2024 21:24:22 +0000

I'm excited to share my new portfolio, a dynamic and interactive space where you can explore my latest projects, skills, and experiences. I would love for you to visit my portfolio, try it out, and share your feedback with me. Your input is invaluable as I continue to refine and improve my work!

Here’s a peek at the tools and frameworks that power my site:

Next.js
React
Three.js & @react-three/fiber
Framer Motion
Tailwind CSS & Tailwind Merge
Sentry

You can check out the code behind this portfolio on GitHub and explore it live at https://www.majd-sufyan.site/.

Let's Connect!

If you like what you see, I’d love to connect with you on LinkedIn. Following me there is the best way to stay updated on my latest projects and connect over shared interests.

Your feedback is crucial to me, so please don’t hesitate to reach out after exploring my portfolio. I’m looking forward to hearing your thoughts!

Good vs. great Programmer 💪

Majd-sufyan — Tue, 27 Aug 2024 21:03:58 +0000

How to Answer Technical Questions Like a Pro

Answering technical interview questions is all about showing off your problem-solving skills and understanding! A great response not only highlights what you know but also how you think. In this article, we’ll explore fun ways to improve your answers to common web and software development questions, turning good responses into fantastic ones. Stick around for some friendly tips to help you shine in your technical interviews!

Example 1: Handling a Slow Database Query

Interviewer: "What would you do if a database query is running much slower than expected in a production environment?"

Good Developer:
"I would start by checking the database indexes to ensure they are set up correctly. If needed, I would add indexes on the columns used in the query’s WHERE clause. I would also look into optimizing the query by reducing the number of joins or breaking it down into smaller queries."

Great Developer:
"First, I’d analyze the slow query using the database's query analyzer or execution plan to pinpoint where the bottleneck is. Common issues might include missing indexes, inefficient joins, or excessive data retrieval. After identifying the problem, I would optimize the query by adding or adjusting indexes, refactoring the query for better performance, and possibly denormalizing some data if appropriate. I would also consider caching frequent queries, especially if the underlying data doesn’t change often. Monitoring tools should be implemented to continuously assess query performance. If performance issues persist, I might evaluate the database structure and consider more scalable solutions like partitioning, sharding, or even migrating to a NoSQL database for specific use cases."

Example 2: Debugging a Memory Leak in a Web Application

Interviewer: "How would you approach diagnosing and fixing a memory leak in a web application?"

Good Developer:
"I would use a memory profiler to track down the memory leak. Once identified, I’d look for places in the code where objects are not being released properly, like event listeners or large data structures, and make sure they are cleaned up."

Great Developer:
"I’d begin by identifying the symptoms of the memory leak, such as increased memory usage over time or performance degradation. Using a memory profiler, I would track the application's memory usage to locate the exact spot where the leak occurs. Common culprits might include lingering event listeners, unoptimized DOM manipulation, or large data objects that aren't being properly garbage collected. After finding the issue, I’d refactor the code to ensure proper cleanup, such as removing event listeners when they are no longer needed, avoiding global variables, and optimizing data structures. Post-fix, I’d implement automated memory monitoring to catch any future leaks early. Additionally, I’d review the entire codebase for similar patterns that could cause memory issues."

Example 3: Optimizing Front-End Performance

Interviewer: "What steps would you take to improve the performance of a web application that is loading slowly on the client side?"

Good Developer:
"I would start by minimizing the size of CSS and JavaScript files through minification and concatenation. I’d also look into lazy loading images and using a content delivery network (CDN) to serve static assets."

Great Developer:
"First, I’d conduct a performance audit using tools like Google Lighthouse or WebPageTest to identify the main bottlenecks. Optimizations would include reducing file sizes through minification, concatenation, and compression (e.g., Gzip or Brotli), as well as ensuring efficient use of CSS and JavaScript by eliminating unused code and deferring non-critical scripts. Implementing lazy loading for images and other resources, using a CDN for faster asset delivery, and leveraging browser caching would also be key strategies. Beyond these, I’d consider optimizing rendering performance by reducing reflows and repaints, utilizing asynchronous JavaScript loading, and considering service workers for caching assets in progressive web apps (PWAs). Finally, I’d set up ongoing monitoring of performance metrics to ensure the site continues to meet performance goals."

Tips for Answering Technical Questions in Interviews

Understand the Problem First: Before jumping to a solution, ask a few questions to clarify the problem. This helps you give a more focused answer!
Consider Multiple Angles: Consider the problem from different angles—what quick fixes can help, what long-term solutions are possible, and what trade-offs should you keep in mind? This shows a deeper understanding!
Explain Your Thought Process: Rather than just giving a solution, walk through your reasoning. Interviewers are often more interested in how you think than in whether you know the exact answer.
Discuss Both Quick Wins and Long-Term Solutions: A great answer blends quick fixes with long-term improvements, showing you care about both immediate needs and the future!
Mention Monitoring and Maintenance: Emphasizing ongoing monitoring and maintenance shows you know that fixing a problem isn’t just about going live!
Be Honest About Trade-Offs: Acknowledge that every solution has its trade-offs. Discussing these shows that you are aware of the complexities involved in technical decisions.

By following these tips, you can turn a good answer into a great one, positioning yourself as a thoughtful, knowledgeable, and thorough developer in technical interviews.

Creating Custom Hooks in React and TypeScript 👨‍💻

Majd-sufyan — Wed, 04 Jan 2023 22:16:10 +0000

React is a popular JavaScript library for building user interfaces, and TypeScript is a popular superset of JavaScript that adds optional static typing and other features. Together, React and TypeScript can provide a powerful toolset for building scalable and maintainable web applications.

One of the key features of React is its ability to reuse code through the use of custom hooks. Custom hooks are functions that allow you to extract component logic into reusable functions. They are a powerful way to share logic across your application, and can help to reduce the complexity of your code.

To create a custom hook in React and TypeScript, you will need to follow a few steps.

First, create a new file in your project and name it useMyHook.ts. This file will contain the code for your custom hook.

Next, define the function signature for your custom hook. A custom hook should always begin with the word "use" and should follow the rules for naming functions in TypeScript. For example:

import { useState, useEffect } from 'react';

export function useMyHook(): [number, (n: number) => void] {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`count is ${count}`);
  }, [count]);

  return [count, setCount];
}

In this example, the custom hook is named useMyHook and it returns a tuple containing the current value of count and a function for updating count. The hook also uses the useState and useEffect hooks from React, which are used to manage state and side effects in a functional component.

To use your custom hook in a React component, import it into the component file and use it like any other hook. For example:

import { useMyHook } from './useMyHook';

function MyComponent() {
  const [count, setCount] = useMyHook();

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

This component uses the useMyHook custom hook to manage the count state and render a button that increments the count when clicked.

Custom hooks are a powerful way to share logic across your React components and can help to reduce the complexity of your code. By following the steps outlined above, you can easily create custom hooks in React and TypeScript and take advantage of the benefits they offer.

React Cheatsheet for 2023 ✍️

Majd-sufyan — Sat, 31 Dec 2022 13:12:27 +0000

Welcome to my React cheat sheet! In this article, I'll cover all the common concepts and techniques we use every day when developing in React. I'll be covering topics such as React elements, element attributes, element styles, fragments, components, props, children props, conditionals, lists, context, and hooks.

Whether you're an experienced developer or new to React, this cheat sheet aims to provide you with a quick reference for all the key concepts and techniques you need to know to build powerful and scalable applications with React.

So let's get started and dive into my React cheatsheet!

React Element Attributes

JSX requires a different syntax for its attributes.

Since JSX is really JavaScript and JavaScript uses a camelcase naming convention (that is, “camelCase”), attributes are written differently than HTML.

The most common example is the class attribute, which we write as className.

<div className="App"></div>

React Element Styles

In addition to attributes, elements can also have inline styles applied to them. To set inline styles in React, you'll need to use the style attribute and pass in an object containing the desired styles. For example:

<div style={{color: 'red', fontSize: '16px'}}>Hello World</div>

React Fragments

Sometimes, you may want to render a group of elements without adding an extra DOM node around them. In these cases, you can use React fragments, which allow you to wrap multiple elements in a single container without adding any extra markup. To use a fragment, you can use the <> syntax:

<>
  <div>First element</div>
  <div>Second element</div>
</>

React Components

Components are the building blocks of a React application and allow you to split your UI into reusable pieces. You can create a component by defining a JavaScript function or class that returns a React element. For example:

function MyButton(props) {
  return <button>{props.label}</button>;
}

React Props

Props (short for "properties") are a way for components to accept data from their parent components. When a parent component renders a child component, it can pass data to the child component through props. For example:

<MyButton label="Click me" />

React Children Props

Sometimes, you may want to render a component's children inside the component itself. To do this, you can use the props.children property, which represents the content between the opening and closing tags of a component. For example:

function MyContainer(props) {
  return (
    <div>
      {props.children}
    </div>
  );
}

<MyContainer>
  <p>Content goes here</p>
</MyContainer>

React Conditionals

React allows you to use JavaScript expressions to conditionally render elements based on certain conditions. For example, you can use the && operator to only render an element if a certain condition is true:

{isLoggedIn && <p>Welcome back!</p>}

React Lists

React provides a map function that allows you to render a list of elements based on an array of data. For example:

const items = ['item 1', 'item 2', 'item 3'];

<ul>
  {items.map((item) => (
    <li>{item}</li>
  ))}
</ul>

React Context

React Context is a way to pass data through the component tree without having to pass props down manually at every level. It is often used for global data that needs to be accessible by multiple components, such as a user's theme preference or a language setting.

To create a context, you can use the createContext function and provide a default value for the context. Then, you can use the Provider component to provide the context value to its children, and the useContext hook to consume the context value from a component.

React Hooks

React Hooks are a new addition to React that allow you to use state and other features in functional components, rather than just class-based components. There are several built-in hooks that provide common functionality, such as managing state or performing side effects.

I am going to cover the 6 essential hooks you absolutely need to know:

useState
useEffect
useRef
useContext
useCallback
useMemo

React `useState` Hook

The useState hook allows you to add state to a functional component. It returns an array with two elements: the current state value and a function to update it. You can use the hook like this:

import { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

React `useEffect` Hook

The useEffect hook allows you to perform side effects in a functional component, such as making an API call or setting up a subscription. It takes a function as an argument that will be called after the component renders. You can use the hook like this:

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Perform side effect here
  });

  return <div>My component</div>;
}

React `useRef` Hook

The useRef hook allows you to create a mutable reference to a DOM element or value. It returns a mutable ref object whose current property is initialized to the provided argument (or null if no argument is given). You can use the hook like this:

import { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  return (
    <div>
      <input ref={inputRef} />
    </div>
  );
}

React `useContext` Hook

The useContext hook allows you to consume a context value from a functional component. It takes the context object as an argument and returns the current context value. You can use the hook like this:

import { useContext } from 'react';

const MyContext = createContext(defaultValue);

function MyComponent() {
  const value = useContext(MyContext);

  return <div>{value}</div>;
}

React `useCallback` Hook

The useCallback hook returns a memoized callback function that only changes if one of the dependencies has changed. It can be used to optimize the performance of components that rely on expensive functions or callbacks. You can use the hook like this:

import { useCallback } from 'react';

function MyComponent() {
  const callback = useCallback(() => {
   // Expensive function or callback
  }, [dependency1, dependency2]);

  return <div onClick={callback}>Click me</div>;
}

React `useMemo` Hook

The useMemo hook returns a memoized value that only changes if one of the dependencies has changed. It can be used to optimize the performance of expensive calculations by only re-computing the value when necessary. You can use the hook like this:

import { useMemo } from 'react';

function MyComponent() {
  const value = useMemo(() => {
    // Expensive calculation
  }, [dependency1, dependency2]);

  return <div>{value}</div>;
}

Conclusion

In this article, we provided a cheat sheet for some of the most common techniques and concepts used in React development, including element attributes, styles, fragments, components, props, conditionals, lists, context, and hooks. By familiarizing yourself with these concepts, you'll be well-equipped to build powerful and scalable applications with React.

You should know about the filter(Boolean) trick 💡

Majd-sufyan — Sat, 31 Dec 2022 12:23:09 +0000

The Array.prototype.filter() method in JavaScript allows you to create a new array with only the elements that pass a certain test. The filter() method takes a callback function as an argument, which should return a Boolean value indicating whether or not the element should be included in the new array.

One use case for the filter() method is to remove falsy values from an array. You can do this by using the Boolean function as the callback for the filter() method. The Boolean function returns true for values that are "truthy" and false for values that are "falsy". In JavaScript, the following values are considered falsy:

false
0 (zero)
'' (empty string)
null
undefined
NaN (Not a Number)

Here is an example of how to use the filter(Boolean) trick to remove falsy values from an array:

const values = [0, 1, '', 'hello', null, undefined, false, true, NaN];

const truthyValues = values.filter(Boolean);

console.log(truthyValues); // [1, 'hello', true]

In this example, the filter() method is called on the values array and passed the Boolean function as the callback. The filter() method will then iterate through each element in the values array and include any elements for which the Boolean function returns true in the new truthyValues array.

Here is another example of using the filter(Boolean) trick to remove falsy values from an array of objects:

const users = [
  { id: 1, name: 'John', age: 30 },
  { id: 2, name: 'Jane', age: 25 },
  { id: 3, name: 'Bill', age: 35 },
  { id: 4, name: 'Mary', age: 40 },
  { id: 5, name: '', age: null }
];

const validUsers = users.filter(user => Boolean(user.name) && Boolean(user.age));

console.log(validUsers);
/* 
[
  { id: 1, name: 'John', age: 30 },
  { id: 2, name: 'Jane', age: 25 },
  { id: 3, name: 'Bill', age: 35 },
  { id: 4, name: 'Mary', age: 40 }
]
*/

In this example, the filter() method is used to remove any users who have an empty string for their name or a null value for their age. The filter() method is passed a callback function that uses the Boolean function to check if the name and age properties of each user are truthy. The filter() method will then include only the users for which the callback function returns true in the new validUsers array.

The filter(Boolean) trick is a useful technique for removing falsy values from an array in JavaScript. It can be a powerful way to filter and transform data to meet your specific needs.

I hope you will find this trcik helpful and will help you in your journey. Feel free to give me suggestions.

Take care developer 👋

Managing React State Like A Superhero 🦸

Majd-sufyan — Sun, 25 Dec 2022 13:17:22 +0000

The state is an important concept in React, as it allows components to store and manage data that can change over time. Properly managing state can help make your React application more efficient and easier to maintain. In this article, we will explore different ways to manage state in React and provide code examples for each method.

1- Using the useState Hook:

One of the most common ways to manage state in React is by using the useState hook. This hook allows you to add state to functional components, which were previously unable to have state. Here is an example of how to use the useState hook:

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

In this example, we are using the useState hook to create a piece of state called count, which is initially set to 0. The useState hook returns an array with two elements: the current value of the state (in this case, count) and a function to update the state (in this case, setCount). We can use the setCount function to update the value of count by passing a new value as an argument.

2- Using the useReducer Hook:

Another way to manage state in React is by using the useReducer hook. This hook is similar to the useState hook, but it allows you to manage complex state logic with reducers, which are functions that take in the current state and an action, and return a new state. Here is an example of how to use the useReducer hook:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Example() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>You clicked {state.count} times</p>
      <button onClick={() => dispatch({ type: 'increment' })}>
        Increment
      </button>
      <button onClick={() => dispatch({ type: 'decrement' })}>
        Decrement
      </button>
    </div>
  );
}

3- Using the useContext Hook:
Another way to manage the state in React is by using the useContext hook in combination with the createContext function. The createContext the function allows you to create a context object, which can be used to pass data down the component tree without the need for props drilling. The useContext hook allows you to access the context object from a functional component. Here is an example of how to use them createContext && useContext hooks:

import React, { createContext, useContext } from 'react';

const CountContext = createContext();

function Example() {
  const count = useContext(CountContext);

  return (
    <div>
      <p>You clicked {count} times</p>
    </div>
  );
}

function App() {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={count}>
      <Example />
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </CountContext.Provider>
  );
}

4- Using a Higher-Order Component:

Another way to manage the state in React is by using a higher-order component (HOC). A HOC is a function that takes a component as an argument and returns a new component with additional functionality. Here is an example of how to use a HOC to manage the state:

import React from 'react';

function withState(WrappedComponent) {
  return class extends React.Component {
    state = { count: 0 };

    increment = () => {
      this.setState({ count: this.state.count + 1 });
    }

    render() {
      return (
        <WrappedComponent
          count={this.state.count}
          increment={this.increment}
          {...this.props}
        />
      );
    }
  };
}

function Example(props) {
  return (
    <div>
      <p>You clicked {props.count} times</p>
      <button onClick={props.increment}>
        Click me
      </button>
    </div>
  );
}

const EnhancedExample = withState(Example);

function App() {
  return (
    <EnhancedExample />
  );
}

In this example, we are using a HOC called withState to add state management functionality to the Example component. The withState HOC returns a new component that has a count state and an increment function, which updates the count state. The Example component receives the count and increment props from the HOC and uses them to render the component.

5- Using a State Management Library:
Finally, another way to manage the state in React is by using a state management library.

Using a state management library is a popular approach to managing the state in larger React applications. A state management library is a separate package that provides additional functionality for managing the state, such as support for handling asynchronous actions and managing a global state.

One popular state management library for React is Redux. Redux is a predictable state container for JavaScript applications that helps you write applications that behave consistently. It works by creating a store that holds the application's state and provides functions for updating the state in a predictable way.

Here is an example of how to use Redux to manage the state in a React application:

import React from 'react';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

const initialState = { count: 0 };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

function Example(props) {
  return (
    <div>
      <p>You clicked {props.count} times</p>
      <button onClick={props.increment}>
        Increment
      </button>
      <button onClick={props.decrement}>
        Decrement
      </button>
    </div>
  );
}

function mapStateToProps(state) {
  return {
    count: state.count
  };
}

function mapDispatchToProps(dispatch) {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' })
  };
}

const EnhancedExample = connect(
  mapStateToProps,
  mapDispatchToProps
)(Example);

function App() {
  return (
    <Provider store={store}>
      <EnhancedExample />
    </Provider>
  );
}

In this example, we are using Redux to create a store that holds the application's state and a reducer function that updates the state in a predictable way. We are then using the connect function from the react-redux library to connect the Example component to the Redux store. The connect function returns a new component that receives the state and dispatch functions as props. The Example component uses the count prop to render the component and the increment and decrement props to update the state.

In conclusion, there are several different ways to manage the state in React, each with its own advantages and disadvantages. It is important to choose the right approach for your specific use case and to consider factors such as the complexity of your state, the size of your application, and the needs of your team.