Forem: Abdullah Ola Mudathir

Stop Re-rendering: React Memoization Guide

Abdullah Ola Mudathir — Sun, 23 Nov 2025 18:29:47 +0000

Memoization is a technique used to improve performance by optimizing and storing the results of expensive functions. This is done by caching results and returning cached results when the same calls occur again with no change.

Like your brain, the computer uses its memory to perform programs. Just like you don’t have to go back to relearn information you remember, the computer uses previously cached results when there is no change instead of performing the task again.

Memoization in React

Memoization in React can be achieved with the following:

React is a JavaScript library used to build user interfaces for the web. On the premise that you’re not a beginner, I’ll be talking about how to achieve memoization in React.

React’s useMemo

The useMemo hook that React offers is used to cache the results of expensive functions.

It simply caches the result of the computation, and only when the dependencies or arguments change would it recalculate the computation.

const valueToBeMemoized = useMemo(function(){},[dependencies])

  const memoizedValue = useMemo(() => {
    return expensiveComputationFunction(args);
  }, [args]);

Whenever the argument(args) changes, the memoizedValue reruns the expensiveComputationFunction and stores its value. If useMemo is to be used in your application, make sure the function doesn't modify any external state, i.e., the function should only be based on its input and not hold the power to mutate values outside its scope.

React.memo()

A memoized component changes only when the props are changed. Like the useMemo hook, the main thing here is dependencies/props that do not mutate often. Essentially, this tells React that if props don't change, don't rerender the component, use the existing component instead.

React useCallback

The useCallback function, unlike React.memo, caches functions if the dependencies are unchanged.

In JavaScript, when applications are run, functions generate references. With every rerender, the function generates a new reference. The useCallback creates a function once and memoizes its identity(the reference).

  const functionName = useCallback(() => {
    //function to be performed
  }, [args]);

Each render === a new function reference. useCallback helps reduce this.

When to memoize

If a certain component is slow due to expensive functions, and you notice a drag in website responsiveness.
A function has to perform expensive functions, but the props rarely change.
If the component isn’t going to be mutated often, memoize it to reduce rerenders, for example, if you have a component dependent on a form.

When not to memoize

Cheap/fast components: if it's not an expensive function.
Props change frequently anyway
Premature optimization: Memoization should not be your initial go-to for performance optimization.

React Update

On the 7th of October, React launched the stable React Compiler 1.0. This new update works to automatically optimize components and hooks, reducing the need for manual memoization.
To install :

npm install --save-dev --save-exact babel-plugin-react-compiler@latest

When working on an existing application, slowly inject this new update into your application instead of an all-out refactor.

Remember: Test before memoizing, optimize before memoizing, as overuse of memoization can lead to performance issues.

There are other use cases for memoization, but overusing memoization impacts performance as well. Try to optimize your application without the need for memoization and understand the problem you're trying to fix and whether to memoize is the right thing to do.

CSS Office Art: The Work

Abdullah Ola Mudathir — Sun, 27 Jul 2025 22:45:20 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, CSS Art: Office Culture.

Inspiration

My css art was built around a typical work day, just a pictoral representation of a day doing work. I went through the css prompt for the hackathon and brainstormed on what I could build to showcase this.
I was able to sketch what I envisioned and did some research online to find an image or an animated version of something close to my thought process. This was so i could have a pictoral representation of what I needed to build. Image I was inspired by:

Demo

The code is available: https://github.com/Cruxcodes/CSS-Office-Art

Live View: https://office-css-art.netlify.app/

Journey

It was a brain teasing journey. I had to zoom in and zoom out constantly to make sure each border was round enough or to discern if the div had to be closer or not.
It was a fun project. I enjoyed getting the animations to work, each win was really great. I also learnt new things building the project.

Linear gradient: Depending on your skill with css, you already know how linear-gradient works with css. When i was trying to build the boxes I found it redundant to use two divs and didn't want to go through using box shadows. I found out you can use linear gradient to create solid colors.

background-image: linear-gradient(to right, #ea3b60 40.5%, #ff506d 0%);

By setting the second property to 0%, the color starts from where the previous color ends. Since there is no space or break for colors to blend, it creates the solid colors side by side.

Animations: I was able to explore many new things with css animations. The one thing I'm most proud of is the swing of the banner.

Seeing the website go from just boxes to something that looks good is an achievement I would like to share.

Git commit messages: I made use of conventional commits for most of my uploads but i was able to use vscode's ai to generate commit messages to push to my git repository.

I also improved my mastery with css properties like z-index, the position elements, variables in css, the before and after properties. I was able to minimize creating too many divs by making use of the properties css provides.

Responsiveness : To deal with responsiveness, I made use of the scale property in css as well as the media queries.

 @media screen and (max-width: 768px) {
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%) scale(0.8);
  }
  @media screen and (max-width: 600px) {
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%) scale(0.6);
  }
  @media screen and (max-width: 500px) {
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%) scale(0.4);
  }

There is definitely room for improvement but i was able to make the css art scale just enough that it would be compatible across devices.

Open source additions.

I also was able to use open source code to improve my css art. I made use of a codepen addition to add the animations for the eyes of character. I also made use of NadaSadek's coffee steam for my own coffee cup.

Coffee Steam :https://codepen.io/NadaSadek/pen/xxRgZbq
Eyes : https://codepen.io/creme/pen/rdjXav

This was a fun experience and I really enjoyed making css art that tells a story. Office culture definitely isn't just about working, the friends you make, lunch you have, handshakes you exchange, they all form their own little part of your office story.

License

The work is licensed under the MIT License.

The code is available: https://github.com/Cruxcodes/CSS-Office-Art

Live View: https://office-css-art.netlify.app/