React Re-Render Causes Flickering : How can i fix this?

I’m new in coding and i couldn’t get how to fix the issue after i googled many times. The issue is i have a layout component which contains 4 different components. When i call a function in a function component it affects the others and the others re-render. Re-render is fine tho however my images are flickering . I would like to remove the flickering of the image loading. I’ve tried using React.memo() and useCallBack() but both of them didn’t work for me. I hope I made myself clear , thanks in advance. So here are my code samples :

LAYOUT COMPONENT

import React, { useState } from "react";
import Header from "./Header";
import MenuTitle from "./MenuTitle";
import MenuList from "./MenuList";
import Cart from "./Cart";
import Footer from "./Footer";
const Layout = ({
  cartData,
  menuList,
  menuTitles,
  callMenuList,
  addToCart,
  title,
  removeFromCart,
  currency,
}) => {
  const [isCartOpened, setIsCartOpened] = useState("closed");

  const openCart = () => {
    if (isCartOpened == "closed") {
      setIsCartOpened("opened");
    } else {
      setIsCartOpened("closed");
    }
  };
  const closeCart = () => {
    setIsCartOpened("closed");
  };

  return (
    <div>
      <Header openCart={() => openCart()} cartData={cartData} />
      <MenuTitle
        menuTitles={menuTitles}
        callMenuList={(titleProp) => callMenuList(titleProp)}
      />
      <MenuList
        title={title}
        menuList={menuList}
        addToCart={(data) => addToCart(data)}
      />
      <Cart
        currency={currency}
        cartData={cartData}
        removeFromCart={(itemId) => removeFromCart(itemId)}
        isCartOpened={isCartOpened}
        closeCart={() => closeCart()}
      />
      <Footer />
    </div>
  );
};

export default Layout;

APP COMPONENT

import Layout from "./Components/Layout";

function App() {
  const [data, setData] = useState([]);
  const [menuTitle, setMenuTitle] = useState([]);
  const [title, setTitle] = useState("");
  const [currency, setCurrency] = useState("");
  const [menuList, setMenuList] = useState([]);
  const [cart, setCart] = useState([]);
  const API = "./db.json";

  const callMenuList = React.useCallback(
    (titleProp) => {
      setTitle(titleProp);
      const filterMenuList = data.filter((title) => title.TYPE == titleProp);
      setMenuList(filterMenuList);
    },
    [menuList]
  );

  const addToCart = React.useCallback(
    (data) => {
      localStorage.setItem("cart", JSON.stringify([...cart, data]));
      setCart([...cart, data]);
    },
    [setCart]
  );

  const removeFromCart = (itemId) => {
    const cartItems = cart;

    cartItems.map((item) => {
      if (item.CODE == itemId) {
        const filtered = cartItems.filter(
          (cartItem) => cartItem.CODE != itemId
        );
        setCart(filtered);
      }
    });
  };

  useLayoutEffect(() => {
    const titles = [];
    const fetchData = async () => {
      const response = await fetch(API);
      const responseData = await response.json();
      setData(responseData);
      console.log(responseData);

      // Filtering menu types
      responseData.map((item) => titles.push(item.TYPE));
      const filtered = titles.filter(
        (item, index, self) => self.indexOf(item) == index
      );
      setMenuTitle(filtered);

      const initialMenuList = responseData.filter(
        (item) => item.TYPE == filtered[0]
      );

      setTitle(initialMenuList[0].TYPE);
      setCurrency(initialMenuList[0].CURRENCY);
      setMenuList(initialMenuList);
    };
    fetchData();

    if (JSON.parse(localStorage.getItem("cart"))) {
      setCart(JSON.parse(localStorage.getItem("cart")));
    }
  }, []);

  return (
    <Layout
      menuTitles={menuTitle}
      menuList={menuList}
      data={data}
      callMenuList={(titleProp) => callMenuList(titleProp)}
      addToCart={(data) => addToCart(data)}
      removeFromCart={(itemId) => removeFromCart(itemId)}
      cartData={cart}
      title={title}
      currency={currency}

    />
  );
}

export default App;

Hey Mithat,

it would be awesome to see a (working) example of your project on codesandbox, so that we can fiddle around with it.

If you got your code on GitHub/GitLab, you can even import it on codesandbox.

Looking forward to seeing it!

1 Like

Hey Miku! Thanks for taking time to answer . I’m having flickering issue on mobile browser. Here is my app StackBlitz

I tried it and it does not flicker on my end (Win 10 OS, Chrome browser)

1 Like

Hey ! It works fine on windows 10 . I’m having this issue on mobile browser (Safari).