Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to prevent React from re-rendering the whole IFrame?

I m working on a simple react UI which uses React beautiful Drag and Drag Library for Dragging and Dropping
The Items however use an iframe with a third party application widget in.

When I drag these they re-render the entire iframe which I don’t want to happen, is there a way to stop this?

See example of this happening.

https://codesandbox.io/p/sandbox/react-beautiful-dnd-sample-forked-49cc7x?file=%2Fsrc%2FApp.tsx

How can we prevent from reloading ?

Tags:

2

Answers


  1. 0

    I think I can give you some suggestions that could help:

    1. Try useMemo or by moving the iframe outside the component that is frequently experiencing a state change.
    import React, { memo } from 'react';

const IframeComponent = memo(({ src }) => {
  console.log('Iframe rendering(This will not log after initial render unless src changes) ');
  return (
    <iframe src={src} width="100%" height="400px" />
  );
});

export default IframeComponent;

    You can now use theIframeComponent like <IframeComponent src="https://example.com" />

    1. Using React’s key prop: You can use a fixed key prop on the iframe.

    Let me know if this helps.

    Login or Signup to reply.
  2. 0

    Just use it in useEffect to prevent side effects.

    Before:

    const onDragEnd: OnDragEndResponder = ({ source, destination }) => {
if (!destination) return;
const copiedCards = [...cards];
const [draggedCard] = copiedCards.splice(source.index, 1);
copiedCards.splice(destination.index, 0, draggedCard);
setCards(copiedCards.map((card, index) => ({ ...card, sortOrder: index })));};

    After:

      let onDragEnd;
  useEffect(() => {
  onDragEnd = ({ source, destination }) => {
  if (!destination) return;
  const copiedCards = [...cards];
  const [draggedCard] = copiedCards.splice(source.index, 1);
  copiedCards.splice(destination.index, 0, draggedCard);
  setCards(
    copiedCards.map((card, index) => ({ ...card, sortOrder: index })));
};});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search