How to trigger an event after any (re)render of a React/Redux app

Question

A React/Redux app that I develop needs to live inside an iframe. The surrounding document can be told to resize the iframe by sending a message from within. I would like to send the resize message any time the DOM changes.

Using a generic MutationObserver will cause a flickering between the time the DOM is updated and the resizing of the iframe.

The application is set up using

render(
  <Provider store={store}>
    ...
  </Provider>,
  document.querySelector("..."),
  resizeIframe
);

The resizeIframe callback function solves the initial rendering, but does not help with child component updates.

How can I trigger resizeIframe on any React (re)rendering?

Edit: I know resizing on every rendering is inefficient. However, getting rid of the delay between DOM resize and iframe resize appears to be the bigger problem.

Naveed Aheer · Accepted Answer · 2017-05-02 10:58:27Z

1

You can use componentWillReceiveProps() to do anything you want when props/state changes. more about react lifecycles

answered May 2, 2017 at 10:58

Naveed Aheer

1,8456 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jcassee Over a year ago

Would I need to implement this on every single React component I use? I would rather not. (Also, third-party components?)

Naveed Aheer Over a year ago

you can use a function inside ' componentWillReceiveProps(){anyfunction()} '

jcassee Over a year ago

Two questions then: 1) On which one component would I implement this on? Would I need to wrap my whole application in one component that implements componentWillReceiveProps? 2) As componentWillReceiveProps occurs before rendering, wouldn't componentDidUpdate be the correct phase to resize?

timetowonder · Accepted Answer · 2017-05-02 11:19:08Z

1

One of the fundamental ideas of react is that calling calling a render method of an element doesn't necessarily change the DOM.

So it doesn't sound like a good idea to respond to every component's render method being called.

You also wrote:

I would like to send the resize message any time the DOM changes

This doesn't sound great, either: changes to the DOM do not necessarily change the size of the document.

It looks like what you need is to detect the size changes to the iframe that your app lives in, or to the root element of your app. A good idea would be to use a library which does exactly this: https://github.com/wnr/element-resize-detector

Start by playing with its convenient listenTo method:

import elementResizeDetectorMaker from 'element-resize-detector';

const erd = elementResizeDetectorMaker();
erd.listenTo(document.getElementById("test"), function(element) {
  resizeIframe(); // the function you implemented earlier
});

answered May 2, 2017 at 11:19

timetowonder

5,5317 gold badges38 silver badges54 bronze badges

1 Comment

jcassee Over a year ago

Thanks for the suggestion. I implemented erd and let it listen to the body element. Unfortunately, there is still some delay between the resize of the document and the resize of the iframe, resulting in flickering.

Collectives™ on Stack Overflow

How to trigger an event after any (re)render of a React/Redux app

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related