Modal inside FlastList React Native

Question

I am creating a Modal inside a flatlist, but when i close the modal, the whole flatlist re-renders. I know this is because the useState of modal. How can I solve this??

I dont know what to do to prevent the whole modal from re-rendering

Answer 1

You can try using React.memo with Context API/redux to prevent the re-render.

for example: using memo

const FlatlistComponent = React.memo(({ data }) => {
  // Your flatlist code here
});

actually, you can combine the 2 solutions together to get better performance. Like This;

import React, { useState } from 'react';

const FlatlistComponent = ({ data }) => {
  const [openModals, setOpenModals] = useState({});

  const handleOpenModal = (itemId) => {
    setOpenModals({ ...openModals, [itemId]: true }); // redux action
  };

  const handleCloseModal = (itemId) => {
    setOpenModals({ ...openModals, [itemId]: false }); // redux action
  };

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>
          {item.title}
          <button onClick={() => handleOpenModal(item.id)}>Open Modal</button>
          {openModals[item.id] && (
            <div>
              Modal content
              <button onClick={() => handleCloseModal(item.id)}>Close Modal</button>
            </div>
          )}
        </li>
      ))}
    </ul>
  );
};

export default React.memo(FlatlistComponent); // using React.memo here

I hope this will help you.