DEV Community: Abdulrahman Gaoba

The Mind as a Processing System: What Are We Feeding It in the Age of Algorithms?

Abdulrahman Gaoba — Fri, 06 Feb 2026 12:55:31 +0000

As a software engineer, one of the first principles we learn is simple yet dangerously powerful in its implications:

Garbage In, Garbage Out.
If the input is bad, the output will inevitably be bad.

This may sound like a purely technical idea, but in reality, it is a deep law of life. Any system, no matter how intelligent or advanced, ultimately depends on what it is fed.

Over time, I realized that this principle does not apply only to machines. The human mind functions like an intelligent system that is constantly shaped by its inputs, even when we are not consciously aware of it. What we think about, watch, read, and allow into our minds gradually forms how we think, feel, and see the world.

Today, we do not suffer from a lack of information but from an overload of content. Knowledge is more accessible than ever, yet we are drowning in a sea of fast, shallow material: hundreds of short videos, thousands of posts, endless notifications, and messages that grab our attention every few minutes. Everything is designed to hook us momentarily and then disappear, as if we are surviving on fast food for the mind instead of deep intellectual nourishment.

From the outside, this seems harmless, just entertainment and communication. But behind the scenes, powerful systems are working nonstop. Their goal is not to educate you, improve your life, or make you happier. Their goal is to keep you on the platform as long as possible. What matters to them is how many minutes you spend, how much you engage, and how often you return. Every second of your attention becomes data and economic value.

As a result, our minds are constantly flooded with rapid, shallow, and repetitive inputs. We scroll, laugh, comment, forget, and repeat-often without awareness. Over time, this becomes our normal mental diet, even if it is intellectually poor.

From a technical perspective, this is not accidental:

Algorithms do not care about content quality.
They care about watch time, engagement, and addiction.
Every second of attention is converted into data and profit.

Thus, our minds are continuously fed a stream of shallow, fragmented, and repetitive information.

The Mind Is Not Storage. It is a Processor

Many people treat their minds like unlimited storage space:
“Let everything in, and I’ll sort it out later.”

But anyone who understands systems knows that what matters is not how much input you collect, but how well your mind can process it. When you overload any system, it slows down, becomes confused, and loses efficiency.

In computing, we know that:

The processor is the most critical component.
Overloading it leads to system failure.
Running too many unnecessary processes destroys performance.

The brain works similarly. When we fill it with meaningless, fragmented, and context-less content, the effect does not simply disappear—it gradually changes how we think. We become less capable of sustained focus, and deep thinking starts to feel exhausting instead of natural. Even reading a long article or book begins to feel like a heavy burden.

Slowly, the mind shifts from being a tool for analysis and understanding into a machine for quick consumption. We stop searching for meaning and start chasing instant pleasure. Instead of exploring ideas deeply, we jump between them impatiently.

In short, when we feed our minds shallow and disconnected content:

Our ability to concentrate decreases.
Deep thinking becomes difficult.
Reading long texts becomes exhausting.
Our minds turn into consumers rather than thinkers.

Algorithms Do Not Work for You

From programming experience, I know that an algorithm has no conscience or values. It does not ask:
“Is this good for this person?”
“Will this help them grow?”

Its only question is:
“Will they stay longer?”

If you watch shallow content, you will be shown more of it. If you are drawn to noise and drama, you will be pulled deeper into it—not because you are weak, but because the system is designed that way.

The problem is not that shallow content exists; it always has. The real problem is when it becomes our primary mental diet and shapes how we think, feel, and see life.

This is similar to food: one unhealthy meal does not destroy your body, just as one silly video does not ruin your mind. The damage happens when shallow consumption becomes a daily habit. The real harm comes from repetition and unconscious overconsumption.

Over time, you may not feel direct pain, but you might notice something else:
a sense of emptiness, constant distraction, loss of passion, and difficulty thinking clearly. You feel busy all the time, yet you produce nothing meaningful.

Awareness Is Your Firewall

In technology, we use:

Firewalls
Input validation
Content filtering

We do not allow everything into a system without checks. But with our minds, we often do the opposite—we let everything in without thinking.

Awareness does not mean isolating yourself from the world or rejecting technology. It means becoming intentional about what you consume. Before watching something, ask yourself:
“Is this nourishing me or draining me?”

Learn when to stop instead of letting algorithms control you endlessly. Balance consumption with creation, watching with building, noise with silence.

Most importantly, give your mind space for slow thinking, reflection, reading, and uninterrupted thought.

Reading as an Act of Resistance

In today’s fast-paced world, reading becomes a form of quiet resistance. Sitting down with a book or long article challenges the culture of endless scrolling. When you read deeply, you are not just consuming—you are retraining your brain to focus, be patient, and understand complexity.

Through reading, you reclaim some control over your attention instead of surrendering it to algorithms. You choose to lead your mind rather than follow whatever is shown to you.

We are not against technology—we use it, build it, and benefit from it. But it is not neutral. It can reshape how we think if we are not careful.

The most dangerous thing a conscious person can do is allow systems designed by others to reshape their mind without realizing it.

Your mind is not a trash bin. It is a living system that requires care and thoughtful input. In the end, you are responsible for what enters your mind and what comes out of it.

Understanding Array Prototypes in JavaScript

Abdulrahman Gaoba — Fri, 26 Apr 2024 19:36:56 +0000

When it comes to programming in JavaScript, arrays are one of the fundamental structures that help you store and manage collections of data. The array prototype in JavaScript, often simply referred to as Array prototypes, is crucial because it provides all arrays with a set of built-in methods. These methods allow you to perform various operations on arrays, such as adding and removing items, searching, sorting, and more.

What is an Array Prototype?

In JavaScript, an "array" is a special type of object tailored for storing sequences of values. The Array prototype refers to the template object that provides all arrays with their methods and properties. It’s like a blueprint that gives arrays their functionality.

Common Methods of Array Prototypes

Here’s a look at some of the most commonly used methods provided by the Array prototype, along with simple examples to illustrate how they work.

.push() - Adding Items

Purpose: Adds one or more elements to the end of an array.
Example:

 let fruits = ['apple', 'banana'];
 fruits.push('orange');
 console.log(fruits); // Output: ['apple', 'banana', 'orange']

.pop() - Removing Items
- Purpose: Removes the last element from an array and returns that element.
- Example:
```
 let numbers = [1, 2, 3];
 numbers.pop();
 console.log(numbers); // Output: [1, 2]
```

.shift() - Removing the First Item

Purpose: Removes the first element from an array and returns that element.
Example:

 let cars = ['Toyota', 'Honda', 'Ford'];
 cars.shift();
 console.log(cars); // Output: ['Honda', 'Ford']

.unshift() - Adding to the Front

Purpose: Adds one or more elements to the beginning of an array.
Example:

 let books = ['Harry Potter'];
 books.unshift('Game of Thrones');
 console.log(books); // Output: ['Game of Thrones', 'Harry Potter']

.find() - Finding an Element
- Purpose: Returns the value of the first element in the array that satisfies the provided testing function.
- Example:
```
 let ages = [3, 10, 18, 20];
 let adult = ages.find(age => age >= 18);
 console.log(adult); // Output: 18
```

.filter() - Filtering Elements

Purpose: Creates a new array with all elements that pass the test implemented by the provided function.
Example:

 let scores = [34, 78, 89, 55];
 let highScores = scores.filter(score => score > 60);
 console.log(highScores); // Output: [78, 89]

.map() - Transforming Elements
- Purpose: Creates a new array populated with the results of calling a provided function on every element in the calling array.
- Example:
```
 let numbers = [1, 2, 3, 4];
 let squares = numbers.map(num => num * num);
 console.log(squares); // Output: [1, 4, 9, 16]
```

Why Learn About Array Prototypes?

Understanding these methods can significantly simplify the way you handle data in JavaScript. By using these built-in methods, you can write cleaner, more efficient code. Knowing when and how to use these methods can help you manipulate data arrays effectively without the need for cumbersome loops and complex logic.

Conclusion

Array prototypes are a powerful aspect of JavaScript programming. They not only provide essential methods for everyday tasks but also allow beginners and experienced developers alike to handle data more efficiently. Whether you're managing lists of users, scores, or any other data, array methods can help you simplify your JavaScript code and improve performance.

Introduction to Clean Code Principles: A Deeper Dive with JavaScript Examples

Abdulrahman Gaoba — Mon, 04 Mar 2024 09:06:35 +0000

In the complex landscape of software development, the clarity and quality of the code we write are pivotal. This importance is captured perfectly by Martin Fowler's famous saying, "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." This principle lies at the heart of what we call "clean code." Writing clean code isn't just a practice; it's an art that ensures our work is not only operational but also understandable, maintainable, and elegant. Through the lens of Robert C. Martin's influential work, Clean Code, this article explores the principles of crafting clean code, enriched with examples in JavaScript to make these concepts accessible to developers at all levels—from beginners to advanced practitioners.

The Significance of Clean Code

Clean code is the bedrock of software that's built to last. It ensures that anyone who looks at the code—be it the original author or a newcomer—can understand its purpose, modify it, and fix bugs with minimal overhead. Conversely, "dirty code" is a recipe for confusion, errors, and wasted time, making even simple changes a daunting task. Clean code, then, is about future-proofing your code, making it a joy rather than a chore to work with.

Unpacking the Principles of Clean Code with JavaScript

To turn the philosophy of clean code into actionable advice, let's delve into its core principles, illuminated with JavaScript examples for clarity.

Meaningful Names

Names should be informative, indicating the purpose of a variable or function clearly.

Dirty Code Example:

 let d; // What is 'd'? Days? Data? Duration?

Clean Code Example:

 let elapsedTimeInDays; // Clear and descriptive

Functions Should Do One Thing

Functions must be concise, performing a single task. This simplifies understanding and testing.

Dirty Code Example:

 function handleData() {
   fetchData();
   processData();
   displayData();
 }

Clean Code Example:

 function fetchData() {
   // Fetch data here
 }

 function processData(data) {
   // Process data here
 }

 function displayData(data) {
   // Display data here
 }

Clean Code is Simple and Direct

Embrace simplicity in your solutions to problems.

Example:

 // Instead of complex conditional logic
 if (data !== null || data !== undefined || data !== '') {
   processData(data);
 }

 // Use a straightforward approach
 if (data) {
   processData(data);
 }

Use Descriptive Variables and Function Names

Names should clearly reflect their role or the action they perform.

Example:

 // Instead of
 function crtUsrAcct() {
   // Create user account
 }

 // Use
 function createUserAccount() {
   // Create user account
 }

Comments Are Not Excuses for Bad Code

Comments should explain the "why" behind code logic, not the "what".

Example:

 // Bad use of comments
 // Check if user is logged in
 if (user.isLoggedIn) {
   // ...
 }

 // Good use of comments
 // User must be logged in due to security policy X
 if (user.isLoggedIn) {
   // ...
 }

Formatting Matters

Consistent formatting improves readability.

Example:

 // Inconsistent
 function test(){console.log('test');}
 function anotherTest() {
 console.log('anotherTest');
 }

 // Consistent
 function test() {
   console.log('test');
 }

 function anotherTest() {
   console.log('anotherTest');
 }

Error Handling Is Important

Properly manage errors to improve the user experience.

Example:

 try {
   // Attempt to execute code that may fail
 } catch (error) {
   // Handle errors gracefully
   console.error(error);
 }

Avoid Duplication (DRY Principle)

Repetitive code is harder to maintain and more prone to bugs.

Dirty Code Example:

 let firstName = 'John';
 let lastName = 'Doe';
 let fullName = firstName + ' ' + lastName;

 let anotherFirstName = 'Jane';
 let anotherLastName = 'Smith';
 let anotherFullName = anotherFirstName + ' ' + anotherLastName;

Clean Code Example:

 function createFullName(firstName, lastName) {
   return firstName + ' ' + lastName;
 }

 let fullName = createFullName('John', 'Doe');
 let anotherFullName = createFullName('Jane', 'Smith');

Reflecting on Our "Dirty Code" Sins

We've all been there—looking back at our past work and cringing at the shortcuts we took or the messy code we left behind. It's a natural part of growing as a developer. The key is to learn from these experiences, continually striving to refine our skills and approach to coding. Every piece of "dirty code" we've written is a lesson in disguise, pushing us toward better practices and cleaner code.

Conclusion: The Journey to Mastery

Mastering the principles of clean code is an ongoing journey, one that evolves with each line of code we write and review. By adopting these principles, developers can not only enhance the functionality and readability of their code but also elevate their craft to new heights. Clean code is not about achieving perfection on the first try but about continuous improvement and dedication to excellence. As you embark on your next coding project, keep these principles in mind, and embrace the process of refining your work. The art of writing clean code is a worthwhile pursuit for any developer seeking to leave a mark of quality and craftsmanship on their work.

Understanding and Using the useContext Hook in React

Abdulrahman Gaoba — Sun, 22 Jan 2023 05:47:38 +0000

The useContexthook in React allows a component to access data from a context object without having to pass props down through multiple levels of the component tree. This can make the component structure of a React application more efficient and easier to understand.

To use the useContexthook, a context object must first be created using the createContext function. This function takes an initial value as an argument, which will be the value of the context when it is first accessed by a component.

import React, { createContext } from 'react';

const MyContext = createContext({});

Once the context object has been created, it can be provided to a component tree using the Providercomponent. This component takes a value prop, which is the current valueof the context.

import { MyContext } from './MyContext';

function App() {
  return (
    <MyContext.Provider value={someValue}>
      {/* component tree */}
    </MyContext.Provider>
  );
}

Any component that is a child of the Providercomponent can access the context value using the useContexthook. The hook takes the context object as an argument and returns the current value of the context.

import { MyContext } from './MyContext';

function ChildComponent() {
  const contextValue = useContext(MyContext);

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

The useContexthook also allows a component to update the context value by providing a new value to the Providercomponent. When the context value is updated, all components that are using the context will re-render with the new value.

import { MyContext } from './MyContext';

function App() {
  const [contextValue, setContextValue] = useState({});

  return (
    <MyContext.Provider value={contextValue}>
      <button onClick={() => setContextValue({ ...contextValue, newProp: 'newValue' })}>
        Update Context
      </button>
      <ChildComponent />
    </MyContext.Provider>
  );
}

In summary, the useContexthook in React allows components to access and update data from a context object without having to pass props down through multiple levels of the component tree. This can make the component structure of a React application more efficient and easier to understand.

React State Management: When to Use useState and useReducer Hooks

Abdulrahman Gaoba — Wed, 18 Jan 2023 02:12:51 +0000

React Hooks are a powerful tool that allows developers to manage state and side effects in functional components. Two of the most commonly used hooks are useState and useReducer. Both hooks allow you to manage state in your components, but they are used in different situations and provide different functionality.

useStateis the most basic hook for managing state in a React component. It allows you to set and update a single piece of state. The hook takes in an initial value and returns an array with two elements: the current state and a function to update the state.

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

In this example, count is the current state and setCount is the function to update the state. To update the state, you simply call the setCount function and pass in the new value.

setCount(count + 1);

useStateis great for simple state management, such as keeping track of a form input or a toggle button. But it can become cumbersome when managing more complex state.

useReduceris a more powerful hook for managing state in a React component. It allows you to manage complex state and handle multiple actions in a single function. The hook takes in a reducer function and an initial state, and returns an array with two elements: the current state and a dispatch function.

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

The reducer function takes in the current state and an action, and returns the new state. The dispatch function is used to trigger the reducer function and update the state.

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

dispatch({ type: 'increment' });

In this example, the reducer function is handling two different actions: 'increment' and 'decrement'. The dispatch function is used to trigger the appropriate action and update the state.

useReduceris useful for managing complex state and handling multiple actions in a single function. It allows you to centralize your state management and keep your components simple.

In conclusion, useStateand useReducerare both React Hooks used for managing state in functional components. useState is used for simple state management and allows you to set and update a single piece of state, while useReduceris used for complex state management and allows you to handle multiple actions in a single function. The choice between the two hooks depends on the complexity of your state and the number of actions you need to handle.

Managing State with useState in React

Abdulrahman Gaoba — Tue, 17 Jan 2023 11:30:06 +0000

React is a popular JavaScript library for building user interfaces. One of the key features of React is its ability to manage state, which allows developers to easily track and update data within a component. One way to manage state in React is through the useStatehook.

The useStatehook is a built-in React function that allows developers to create and manage state within a component. The function takes an initial value as an argument and returns an array with two items: the current state and a setter function to update the state.

For example, let's say we have a simple counter component that displays a number and a button to increment the number. We can use the useStatehook to create and manage the state for this component.

import React, { useState } from 'react';

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

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

In this example, we import React and useStatefrom the React library. We then use the useStatehook in our component by calling it and passing in an initial value of 0. The hook returns an array with the current count and the setCount function. We then use these values to display the count and update it when the button is clicked.

The setCount function takes in a new value and updates the state, causing the component to re-render. In this example, when the button is clicked, the setCount function is called with an updated count value of 1, and the component re-renders with the updated count value displayed.

It's worth noting that useStateis a Hook, and Hooks are a new feature proposal that lets you use state and other React features without writing a class. They are currently in React v16.8.0.

You can also use useStatewith objects or arrays, for instance let's say you want to create a simple to-do list application, you can use useStateto manage the state of the to-do list

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);

  function handleAddTodo(todo) {
    setTodos([...todos, todo]);
  }

  return (
    <div>
      <h1>My Todo List</h1>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <input placeholder="Enter a new todo" onKeyPress={(e) => {
          if (e.key === 'Enter') {
            handleAddTodo(e.target.value);
            e.target.value = '';
          }
        }}
      />
    </div>
  );
}

In this example, we use useStateto manage the state of the to-dos list, and we have a function handleAddTodo that will take a new to-do string, and it will update the state of the to-do list by using the setTodos function.

Overall, useStatehook is a great way to handle simple state management in React. It is easy to use, and it makes it easy to update and track data within a component. With its help, developers can build powerful and dynamic user interfaces that can easily adapt to changing data.

One of the main benefits of using useStateis that it allows for a clear and simple way to manage state within a component. It also allows for easy debugging, as the state is clearly defined and can be easily accessed and updated within the component.

Additionally, useStateis also very versatile and can be used to manage state for a wide range of data types, including numbers, strings, objects, and arrays. This makes it a great choice for a variety of different types of projects.

In conclusion, React's useStatehook is a powerful tool for managing state within a component. It is easy to use, versatile and it makes it easy to update and track data within a component. It's a great choice for simple state management tasks, and it can be used in many types of projects.

الكلمات والاختصارات التي يستخدمها المطورون عند الحديث عن التطوير المتكامل للويب

Abdulrahman Gaoba — Wed, 12 Jan 2022 15:03:32 +0000

إذا كنت جديدًا على تعلم التطويرالمتكامل للويب وشعرت بالارتباك من بعض الكلمات والاختصارات التي يستخدمها المطورون عند الحديث عن التطوير المتكامل للويب ، ففي هذا المقال سأقوم بتجميع الكلمات والعبارات الأكثر شيوعًا المتعلقة بـه.

1. Front-end
جزء التطبيق أو موقع الويب الذي يتفاعل معه المستخدم مباشرة.

2. Back-end
جزء التطبيق أو موقع الويب الذي لا يمكن للمستخدم رؤيته أو التفاعل معه بشكل مباشر.

3. Full-stack
التطبيق أو موقع الويب بالكامل ، بما في ذلك الواجهة الأمامية والخلفية.

4. DOM
نموذج كائن المستند هو واجهة برمجة لمستندات الويب.يعتبر أحد الطرق الأساسية في بناء مواقع متفاعلة فيما بينها، حيث تُعتبر هذه الطريقة واجهة تسمح للغات البرمجة بمعالجة محتوى المواقع وهيكليتها.

5. API
واجهة برمجة التطبيقات هو مجموعة من البروتوكولات المستخدمة لإنشاء ودمج برامج التطبيقات. الغرض منه هو توفير وسيلة للبرامج للوصول بسهولة إلى البيانات وتبادلها.

6. Encryption
التشفير عملية تحويل المعلومات أو البيانات إلى رمز ،لمنع الوصول غير المصرح به بحيث تصبح غير مقروءة لأحد باستثناء من يملك معرفة خاصة أو مفتاح خاص لإعادة تحويل النص المشفر إلى نص مقروء.

7.Decryption
فك التشفير _ بينما يحول التشفير المعلومات إلى رمز ، فإن الغرض من فك التشفير هو تحويل رمز المعلومات نفسه مرة أخرى إلى شكله الأصلي.

8. HTTP
هو بروتوكول نقل البيانات على شبكة الويب العالمية.

9. HTTPS
يشبه بشكل أساسي HTTP ، ولكنه يستخدم طرق التشفير لتأمين البيانات التي يتم تمريرها من وإلى صفحات الويب.

10.(Continuous Integration, Continuous Delivery)
التسليم المستمر (CD) هو منهجية لتطوير البرمجيات حيث تكون عملية الإصدار مؤتمتة.
التكامل المستمر (CI) هو ممارسة لتطوير البرمجيات حيث يستخدم أعضاء الفريق نظام التحكم في الإصدار ويقومون في كثير من الأحيان بدمج عملهم في نفس الموقع .

11. UI(User Interface)
هي مجموعة من الوسائل التي يتفاعل بها الأشخاص (المستخدمون) مع منتج أو خدمة . يحاول مطورو واجهة المستخدم (UI developers) جعل واجهة موقع الويب سهلة الاستخدام والتنقل.

12. UX (User Experience)
هي كل ما يرتبط بسلوك وموقف وإحساس المستخدم حيال استخدامه منتجاً أو نظاماً أو خدمةً معيّنة. يركز مطورو UX على جعل تصميم موقع الويب أكثر جاذبية لزواره.

13. Serverless
اللاّخوادم هي خدمة او تقنية تتيح لك بناء التطبيقات وتشغيلها بدون ما تشيل هم السيرفر وهذا لا يعني انه لا يوجد سيرفرات ، فهي موجودة بالفعل ولكن المطور ما يحتاج يشيل هم كيفية بناؤها. يعني تقنية توفر عليك كمطور الكثير من الجهد والوقت.

14. Request/Response
الطريقة التي تتواصل بها الواجهة الأمامية والخلفية مع بعضها البعض هي من خلال الطلبات والردود. يمكن للمسخدم في الواجهة الأمامية طلب بيانات من الواجهة الخلفية ، حيث يتم إرسال هذه البيانات كرد من الواجهة الخلفية.

15. Database
قاعدة البيانات عبارة عن مجموعة منظمة من البيانات ، وفي معظم الأحيان تكون قواعد البيانات مطلوبة لتخزين كميات كبيرة من بيانات المستخدم.

React.memo ()

Abdulrahman Gaoba — Wed, 12 Jan 2022 14:29:50 +0000

React.memo() is one of those things that should be part of every React developer's arsenal. It gives us the ability to remember the React component. As with any tool, before we dive into how to use React.memo(), let's first deal with the problem.

Why do you need memoization?
Memoization is a general concept that basically means caching the results of some computation for later use. This is an optimization technique that is quite widely used in the programming world.

It is important to remember that whenever memoization is used, there must be a criterion that will determine when the cached results are no longer valid and the computation must be performed again.

To understand the problem it solves, consider the following React component:

import { useState, Fragment } from "react";

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

  function handleDecrement() {
    setCount((oldCount) => --oldCount);
  }

  function handleIncrement() {
    setCount((oldCount) => ++oldCount);
  }

  return (
    <Fragment>
      <p>Count is {count}</p>
      <button onClick={handleDecrement}>-</button>
      <button onClick={handleIncrement}>+</button>
    </Fragment>
  );
}

export default App;

A simple component that keeps track of which can be increased or decreased.

Now let's add another component to <App />. To make things easier, we will create a component <Message />that returns some kind of message depending on the ID msgIdpassed to it as props.

function Message(props) {
  let msg = "hello, world";

  if (props.msgId === 1) {
    msg = "hey there!";
  } else if (props.msgId === 2) {
    msg = "hola!";
  }

  return <p>{msg}</p>;
}

We've kept it simple here, but imagine this component <Message /> doing some heavy computation, or perhaps sending a request to an external API to get the final message. We will simulate this situation by adding console.log() all the favorites to the mix.

function Message(props) {
  let msg = "hello, world";

  console.log("Just performed some seriously heavy computation");

  if (props.msgId === 1) {
    msg = "hey there!";
  } else if (props.msgId === 2) {
    msg = "hola!";
  }

  return <p>{msg}</p>;
}

Let's update the component <App /> to use <Message />.

import { useState, Fragment } from "react";

function Message(props) {
  let msg = "hello, world";

  console.log("Just performed some seriously heavy computation");

  if (props.msgId === 1) {
    msg = "hey there!";
  } else if (props.msgId === 2) {
    msg = "hola!";
  }

  return <p>{msg}</p>;
}

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

  function handleDecrement() {
    setCount((oldCount) => --oldCount);
  }

  function handleIncrement() {
    setCount((oldCount) => ++oldCount);
  }

  return (
    <Fragment>
      <Message msgId={1} />
      <p>Count is {count}</p>
      <button onClick={handleDecrement}>-</button>
      <button onClick={handleIncrement}>+</button>
    </Fragment>
  );
}

export default App;

In the video below, pay particular attention to the fact that with every change count , heavy calculations are performed.

At this point, take a step back and consider how ineffective our user interface is at the moment. count does not affect in any way <Message />, but still count very heavy computation is performed every time you update . We only want the computation to happen on change msgId, because the change msgId should result in a different message.

React.memo () rushes to the rescue
React.memo() higher order component. It takes a component as an argument and remembers the result. The memoized result is updated only if the properties of the original component change.

To use React.memo(), just pass your component as an argument and store the result. Our component <Message /> will be:

import { useState, Fragment, memo } from "react";

const Message = memo(function (props) {
  let msg = "hello, world";

  console.log("Just performed some seriously heavy computation");

  if (props.msgId === 1) {
    msg = "hey there!";
  } else if (props.msgId === 2) {
    msg = "hola!";
  }

  return <p>{msg}</p>;
});

Note: I just imported here memo(). If you imported React, you can use React.memo() simply instead memo().

Our code now looks like this:

import { useState, Fragment, memo } from "react";

const Message = memo(function (props) {
  let msg = "hello, world";

  console.log("Just performed some seriously heavy computation");

  if (props.msgId === 1) {
    msg = "hey there!";
  } else if (props.msgId === 2) {
    msg = "hola!";
  }

  return <p>{msg}</p>;
});

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

  function handleDecrement() {
    setCount((oldCount) => --oldCount);
  }

  function handleIncrement() {
    setCount((oldCount) => ++oldCount);
  }

  return (
    <Fragment>
      <Message msgId={1} />
      <p>Count is {count}</p>
      <button onClick={handleDecrement}>-</button>
      <button onClick={handleIncrement}>+</button>
    </Fragment>
  );
}

export default App;

Notice this time that the computation is done when the application is updated, but the change countno longer has this effect.