Rerender view on browser resize with React

Rerender view on browser resize with React

How can I get React to re-render the view when the browser window is resized?
Background
I have some blocks that I want to layout individually on the page, however I also want them to update when the browser window changes. The very end result will be something like Ben Holland’s Pinterest layout, but written using React not just jQuery. I’m still a way off.
Code
Here’s my app:
var MyApp = React.createClass({
//does the http get from the server
loadBlocksFromServer: function() {
$.ajax({
url: this.props.url,
dataType: ‘json’,
mimeType: ‘textPlain’,
success: function(data) {
this.setState({data: data.events});
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
componentWillMount: function() {
this.loadBlocksFromServer();

},
render: function() {
return (

);
}
});

React.renderComponent(
,
document.getElementById(‘view’)
)

Then I have the Block component (equivalent to a Pin in the above Pinterest example):
var Block = React.createClass({
render: function() {
return (

{this.props.title}

{this.props.children}

);
}
});

and the list/collection of Blocks:
var Blocks = React.createClass({

render: function() {

//I’ve temporarily got code that assigns a random position
//See inside the function below…

var blockNodes = this.props.data.map(function (block) {
//temporary random position
var topOffset = Math.random() * $(window).width() + ‘px’;
var leftOffset = Math.random() * $(window).height() + ‘px’;
return {block.description};
});

return (

{blockNodes}

);
}
});

Question
Should I add jQuery’s window resize? If so, where?
$( window ).resize(function() {
// re-render the component
});

Is there a more “React” way of doing this?

Solutions/Answers:

Solution 1:

You can listen in componentDidMount, something like this component which just displays the window dimensions (like <span>1024 x 768</span>):

var WindowDimensions = React.createClass({
    render: function() {
        return <span>{this.state.width} x {this.state.height}</span>;
    },
    updateDimensions: function() {
        this.setState({width: $(window).width(), height: $(window).height()});
    },
    componentWillMount: function() {
        this.updateDimensions();
    },
    componentDidMount: function() {
        window.addEventListener("resize", this.updateDimensions);
    },
    componentWillUnmount: function() {
        window.removeEventListener("resize", this.updateDimensions);
    }
});

Solution 2:

@SophieAlpert is right, +1, I just want to provide a modified version of her solution, without jQuery, based on this answer.

var WindowDimensions = React.createClass({
    render: function() {
        return <span>{this.state.width} x {this.state.height}</span>;
    },
    updateDimensions: function() {

    var w = window,
        d = document,
        documentElement = d.documentElement,
        body = d.getElementsByTagName('body')[0],
        width = w.innerWidth || documentElement.clientWidth || body.clientWidth,
        height = w.innerHeight|| documentElement.clientHeight|| body.clientHeight;

        this.setState({width: width, height: height});
        // if you are using ES2015 I'm pretty sure you can do this: this.setState({width, height});
    },
    componentWillMount: function() {
        this.updateDimensions();
    },
    componentDidMount: function() {
        window.addEventListener("resize", this.updateDimensions);
    },
    componentWillUnmount: function() {
        window.removeEventListener("resize", this.updateDimensions);
    }
});

Solution 3:

A very simple solution:

resize = () => this.forceUpdate()

componentDidMount() {
  window.addEventListener('resize', this.resize)
}

componentWillUnmount() {
  window.removeEventListener('resize', this.resize)
}

Solution 4:

It’s a simple and short example of using es6 without jQuery.

Related:  How to check whether multiple values exist within an Javascript array
import React, { Component } from 'react';

export default class CreateContact extends Component {
  state = {
    windowHeight: undefined,
    windowWidth: undefined
  }

  handleResize = () => this.setState({
    windowHeight: window.innerHeight,
    windowWidth: window.innerWidth
  });

  componentDidMount() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize)
  }

  render() {
    return (
      <span>
        {this.state.windowWidth} x {this.state.windowHeight}
      </span>
    );
  }
}

Solution 5:

Edit 2018: now React has first class support for context


I will try to give a generic answer, that targets this specific problem but a more general problem also.

If you don’t care about side effects libs, you can simply use something like Packery

If you use Flux, you could create a store that contain the window properties so that you keep a pure render function without having to query the window object everytime.

In other cases where you want to build a responsive website but you prefer React inline styles to media queries, or want the HTML/JS behavior to change according to window width, keep reading:

What is React context and why I talk about it

React context an is not in the public API and permits to pass properties to a whole hierarchy of components.

Related:  Get next / previous element using JavaScript?

React context is particularly useful to pass to your whole app things that never changes (it is used by many Flux frameworks through a mixin). You can use it to store app business invariants (like the connected userId, so that it’s available everywhere).

But it can also be used to store things that can change. The problem is that when the context changes, all the components that use it should be re-rendered and it is not easy to do so, the best solution is often to unmount/remount the whole app with the new context. Remember forceUpdate is not recursive.

So as you understand, context is practical, but there’s a performance impact when it changes, so it should rather not change too often.

What to put in context

  • Invariants: like the connected userId, sessionToken, whatever…
  • Things that don’t change often

Here are things that don’t change often:

The current user language:

It does not change very oftenly, and when it does, as the whole app is translated we have to re-render everything: a very nice usecase of hot langage change

The window properties

Width and height to not change often but when we do our layout and behavior may have to adapt. For the layout sometimes it’s easy to customize with CSS mediaqueries, but sometimes it’s not and requires a different HTML structure. For the behavior you have to handle this with Javascript.

You don’t want to re-render everything on every resize event, so you have to debounce the resize events.

What I understand of your problem is that you want to know how many items to display according to the screen width. So you have first to define responsive breakpoints, and enumerate the number of different layout types you can have.

Related:  How to add an onchange event to a select box via javascript?

For example:

  • Layout “1col”, for width <= 600
  • Layout “2col”, for 600 < width < 1000
  • Layout “3col”, for 1000 <= width

On resize events (debounced), you can easily get the current layout type by querying the window object.

Then you can compare the layout type with the former layout type, and if it has changed, re-render the app with a new context: this permits to avoid re-rendering the app at all when the user has trigger resize events but actually the layout type has not changed, so you only re-render when required.

Once you have that, you can simply use the layout type inside your app (accessible through the context) so that you can customize the HTML, behavior, CSS classes… You know your layout type inside the React render function so this means you can safely write responsive websites by using inline styles, and don’t need mediaqueries at all.

If you use Flux, you can use a store instead of React context, but if your app has a lot of responsive components maybe it’s simpler to use context?

Solution 6:

I use @senornestor ‘s solution, but to be entirely correct you have to remove the event listener as well:

componentDidMount() {
    window.addEventListener('resize', this.handleResize);
}

componentWillUnmount(){
    window.removeEventListener('resize', this.handleResize);
}

handleResize = () => {
    this.forceUpdate();
};

Otherwise you ‘ll get the warning:

Warning: forceUpdate(…): Can only update a mounted or mounting
component. This usually means you called forceUpdate() on an unmounted
component. This is a no-op. Please check the code for the XXX
component.