Forem: Mohammad AbdulHakim

The Power of Memoization: A Deep Dive into useMemo, useCallback, and useEffect

Mohammad AbdulHakim — Thu, 15 Jun 2023 15:23:39 +0000

As components render in React, expensive calculations and side effects can fire multiple times unnecessarily, hurting performance. To remedy this, React offers memoization hooks - useMemo, useCallback, and useEffect - that cache values and skip expensive re-renders when inputs haven't changed.

Let's explore how these hooks work and see some examples of how they can optimize performance in React apps.

1- useMemo: Optimizing Expensive Calculations

The useMemo hook memoizes a value by caching the result of a function. On subsequent renders, if the dependencies haven't changed, useMemo will skip re-computing the memoized value and return the cached result.

For example, let's say we have a complex calculation that filters some data:

const filterData = (data, query) => {
  // Expensive calculation...
  return filteredData; 
}

function MyComponent() {
  const [data, setData] = useState([1, 2, 3]);
  const [query, setQuery] = useState("");

  const filteredData = filterData(data, query);

  // ...
}

This will re-run the filterData function on every render, even if query hasn't changed. We can optimize this with useMemo:

function MyComponent() {
  const [data, setData] = useState([1, 2, 3]);
  const [query, setQuery] = useState("");

  const filteredData = useMemo(() => filterData(data, query), [data, query]);

  // ...
}

Now, useMemo will skip re-running the filterData function if data and query haven't changed, and will return the cached filteredData value instead. This optimization helps performance, especially for expensive calculations!

2- useCallback: Optimizing Dependence on Reference Equality

The useCallback hook memoizes a function definition. This is useful when you want to prevent a function from re-rendering unless its dependencies have changed. For example, let's say we have an optimized child component that relies on reference equality to skip re-renders:

function MyChild({ callback }) {
  // Render will skip if callback reference is the same 
  return <div onClick={callback}>Click me</div> 
}

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

  // Will re-create callback on every render
  const callback = () => { /* do something */ };

  return <MyChild callback={callback} />
}

Even though we don't use count in the callback, it will redefine the callback on each render because the function is created inline. We can fix this with useCallback:

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

  // Will only re-define callback if `count` changes
  const callback = useCallback(() => { /* do something */ }, [count]); 

  return <MyChild callback={callback} />
}

Now, the callback will only re-render if count actually changes, optimizing performance.

3- useEffect: Optimizing Expensive Side Effects

The useEffect hook runs side effects (data fetching, subscriptions, etc.) after a component renders. However, by default, it will also re-run those side effects after every render, which can be inefficient. We can optimize this by passing a second argument which is an array of values - the effect will only re-run if one of those values has changed.

For example, let's say we have a component that fetches some data:

function MyComponent() {
  const [data, setData] = useState(null);

  // will re-fetch data on every render!
  fetch('/some/data')
    .then(res => setData(res.json()))

  // ...  
}

We can optimize this with useEffect to only re-fetch if a dependency like id changes:

function MyComponent({ id }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(`/some/data?id=${id}`)
      .then(res => setData(res.json()))
  }, [id]); // will re-fetch only if id changes

  // ...  
}

Now the data will only re-fetch if the id prop actually changes, optimizing our performance.

In summary, React's memoization hooks are key tools for optimizing performance in React applications. useMemo optimizes expensive calculations, useCallback optimizes passing callbacks to optimized child components, and useEffect optimizes expensive side effects. Using them judiciously can make a big impact on the performance and efficiency of your React code.

How I Used Github API to Generate a Dynamic Name Updating Every Minute!

Mohammad AbdulHakim — Sun, 28 May 2023 21:24:03 +0000

abomisr / TheTimeIs

بسم الله الرحمن الرحيم

All praise is due to The Creator of the heavens and the earth

How I Used Github API to Generate a Dynamic Name Updating Every Minute!

1- Getting the current time in GMT

const currentDate = new Date().toUTCString();
console.log(currentDate)   // Sun, 28 May 2023 08:00:48 GMT

we only want "08:00"

const hoursAndMinutes = currentDate.slice(currentDate.indexOf(":")-2,22);

2- Generating the new name

so, the whole new name will be

const newname = `The time is ${hoursAndMinutes} GMT`;
console.log(newname) // The time is 08:00 GMT

make a function which return the new name;

const generateNewName = () => {
  const currentDate = new Date().toUTCString();
  const hoursAndMinutes =

…

View on GitHub

بسم الله الرحمن الرحيم
All praise is due to The Creator of the heavens and the earth

1- Getting the current time in GMT

const currentDate = new Date().toUTCString();

console.log(currentDate)   // Sun, 28 May 2023 08:00:48 GMT

we only want "08:00"


const hoursAndMinutes = currentDate.slice(currentDate.indexOf(":")-2,22);

2- Generating the new name

so, the whole new name will be


const newname = `The time is ${hoursAndMinutes} GMT`;
console.log(newname) // The time is 08:00 GMT

make a function which return the new name;


const generateNewName = () => {
  const currentDate = new Date().toUTCString();
  const hoursAndMinutes = currentDate.slice(currentDate.indexOf(":") - 2, 22);

  const newname = `The time is ${hoursAndMinutes} GMT`;
  return newname;
};
console.log(generateNewName()) // logs "The time is 08:00 GMT"

3- Getting the github token

you will need your github token to use it when update your account.

you can find the steps get your token in github docs

https://github.com/settings/tokens
Generate new token (classic)
select scopes you want, (be sure to select "user" scope to be able to "Update ALL user data")
then generate token, and copy this.
add this token to .env

4- installing packages

npm i dotenv
npm i cross-fetch

5- update account name with github api


const updateAccount = () =>{
    fetch('https://api.github.com/user', {
      method: 'PATCH',
      body: JSON.stringify({
        name: generateNewName(),
      }),
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
        Authorization: `Bearer ${token}`,
      },
    })
}

and run this function in interval each 60000ms


setInterval(() => {
    updateAccount()
}, 60000)

6- run the code

write node {filename}.js in the terminal.
e.g. node index.js

so, the whole code will be


const dotenv = require("dotenv");
const fetch = require("cross-fetch")

dotenv.config()
const token = process.env.GITHUB_TOKEN


//*========> [ GENERATE THE NEW NAME ] <============= 
const generateNewName = () => {
  const currentDate = new Date().toUTCString();
  const hoursAndMinutes = currentDate.slice(currentDate.indexOf(":") - 2, 22);

  const newname = `The time is ${hoursAndMinutes} GMT`;
  return newname;
};
//!======================


//*========> [ UPDATE ACCOUNT FUNCTION ] <============= 
const updateAccount = async() =>{
    let res = await fetch('https://api.github.com/user', {
      method: 'PATCH',
      body: JSON.stringify({
        name: generateNewName(),
      }),
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
        Authorization: `Bearer ${token}`,
      },
    })
    console.log(res.status)
}
//!=====================================


//*========> [ EVERY MINUTE ] <============= 
setInterval(() => {
    updateAccount()
}, 60000)
// !================

Demystifying JavaScript Functions: A Guide to Function Types

Mohammad AbdulHakim — Fri, 26 May 2023 15:58:51 +0000

In JavaScript, there are several types of functions, including:

1- Function declarations

A function declaration defines a named function using the function keyword and can be called anywhere in the code.

function addNumbers(a, b) {
  return a + b;
}

console.log(addNumbers(2, 3)); // logs 5

2- Function expressions

A function expression defines a function as part of an expression, such as assigning a function to a variable.

var multiplyNumbers = function(a, b) {
  return a * b;
};

console.log(multiplyNumbers(2, 3)); // logs 6

3- Arrow functions

Arrow functions are a shorthand syntax for defining functions using the => arrow operator. They are often used for concise one-line functions.

var divideNumbers = (a, b) => a / b;

console.log(divideNumbers(6, 3)); // logs 2

4- Immediately invoked function expressions (IIFE)

An IIFE is a function that is defined and called immediately. It is often used to create a new scope for variables and avoid polluting the global namespace.

(function() {
  var message = "Hello, world!";
  console.log(message);
})();

5- Methods

Methods are functions that are defined as properties of an object. They can be called using theobject and dot notation.

var calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  }
};

console.log(calculator.add(2, 3)); // logs 5
console.log(calculator.subtract(5, 2)); // logs 3

6- Constructor functions

Constructor functions are used to create new objects of a specific type, often referred to as classes. They use the this keyword to set properties of the new object and are called using the new keyword.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

var alice = new Person("Alice", 25);
console.log(alice.name); // logs "Alice"
console.log(alice.age); // logs 25

7-Callback functions

Callback functions are functions that are passed as arguments to another function and called when the other function completes. They are often used for asynchronous programming, such as handling events or making API calls.

function getData(callback) {
  // make API call and return data
  var data = {name: "Alice", age: 25};
  callback(data);
}

function displayData(data) {
  console.log(data.name + " is " + data.age + " years old.");
}

getData(displayData);These are some of the common types of functions in JavaScript, and each has its own use case and advantages.

Unleash the Power of JavaScript: Master the Best Practices and Write Top-Notch Code

Mohammad AbdulHakim — Fri, 26 May 2023 15:36:37 +0000

1- Use const and let instead of var

Const declares a variable whose value cannot be changed. Let has block scope instead of function scope like var. Using const and let improves readability and avoid bugs.


const myName = "Mohammad";
myName = "Ali"; // Error, can't reassign const

let myAge = 30; 
if (true) {
  let myAge = 40;  // Different variable
  console.log(myAge); // 40
}
console.log(myAge); // 30

2- Avoid global variables

Global variables can lead to namespace collisions and unintended side effects in large apps. Use local variables instead.

3- Use arrow functions

Arrow functions have a shorter syntax and lexically bind the this, arguments, super, and new. Target keywords.

// An Arrow function
const add = (a, b) => a + b;

// A function declaration
function add(a,b)=>{
   return a+b
};

4- Use spread operator

The spread operator expands an array into its individual elements. It is a concise way to combine arrays or objects.


const fruits = ["apple", "banana", "orange"];
const moreFruits = [...fruits, "mango"]; 

console.log(moreFruits) // ["apple", "banana", "orange", "mango"]

5- Use destructuring

Destructuring allows you to extract multiple values from arrays or properties from objects into distinct variables.


const [a, b] = [1, 2]; 
// a = 1, b = 2

const {name, age} = {name: "Omar", age: 30}; 
// name = "Omar", age = 30

6- Use template literals

Template literals use backticks () and ${} to embed expressions in a string.

const greeting = (name) => return `Hello, my name is ${name}!`;

7- Use default parameters

Default parameters allow named parameters to be initialized with default values if no value is passed.

const add = (a = 1, b = 2) => return a + b; 

add(10); // 12

8- Use object property shorthand

This shorthand allows you to initialize an object with variables.

const name = "Ahmed";
const age = 30;
const person = { name, age }; 
// {name: "Ahmed", age: 30}

9- Use promise and async/await

Promises and async/await make asynchronous code look synchronous and more readable.

10- Use JavaScript modules

Modules allow you to break up your code into separate files and reuse in other files or projects.

Mastering React Development: Avoiding Common Pitfalls.

Mohammad AbdulHakim — Sat, 29 Apr 2023 11:09:31 +0000

React has become the go-to JavaScript library for building dynamic and interactive web applications. With the release of the latest version, React developers have access to even more tools and features to build scalable and maintainable applications. However, even the most experienced developers can fall into common pitfalls that can impact development efficiency and application performance. In this article, we’ll explore some of these common pitfalls and provide practical tips and best practices for avoiding them to help you master React development.

Ignoring Performance Optimization.

While React is designed to be fast and efficient, developers can still make mistakes that can hurt performance. Some common mistakes include rendering too many components, not using the shouldComponentUpdate lifecycle method, and not optimizing data fetching. To optimize performance, developers should use tools like the React Profiler to identify performance bottlenecks and use optimizations like memoization and lazy loading.

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

Neglecting Best Practices for Code Structure.

Code structure is essential for making code readable and maintainable. Developers can make the mistake of neglecting best practices for code structure, such as not using meaningful variable names or not separating concerns properly. To structure code properly, developers should use a consistent naming convention, separate concerns into different components and files, and use reusable functions and components.

Neglecting Component Lifecycle Management.

In React, components have a lifecycle that determines when they are added, updated, and destroyed. Neglecting to manage the component lifecycle properly can lead to bugs and performance issues. Some common mistakes that developers make include not cleaning up event listeners, not handling errors correctly, and not updating state properly. To avoid these mistakes, developers should gain a clear understanding of the component lifecycle and use lifecycle methods like componentDidMount and componentWillUnmount to manage it effectively.

Overcomplicating State Management.

State management is a crucial aspect of React development. However, developers can make the mistake of overcomplicating state management by using too many state variables or using complex data structures. This can make the code difficult to understand and maintain. To simplify state management, developers should use the useState hook to manage state variables and use immutable data structures like arrays and objects.

Not Using Keys for List Items.

When rendering multiple elements of the same type, you’ll want to give each element a unique “key” prop. This allows React to keep track of which items have changed, are added, or are removed. For example:

<ul>
  {todos.map(todo => 
    <li key={todo.id}>
      {todo.text} 
    </li>
  )}
</ul>

Here we give each li element a key equal to its todo ID. If we didn't do this, React would re-render all items whenever the list changes, rather than just the changed items.

In conclusion, mastering React development requires avoiding common pitfalls that can impact development efficiency and application performance. By understanding the component lifecycle, simplifying state management, optimizing performance, and following best practices for code structure, developers can build high-quality React applications that are fast and efficient. To learn more about React development and avoid common pitfalls.

Remember, React development is all about balance. By mastering React development and avoiding common pitfalls, you can make outstanding applications that are both efficient and user-friendly.