Home >Web Front-end >JS Tutorial >How to Re-render React View on Browser Resize: jQuery vs React-Centric Approach?

How to Re-render React View on Browser Resize: jQuery vs React-Centric Approach?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-19 19:37:01849browse

How to Re-render React View on Browser Resize: jQuery vs React-Centric Approach?

Re-rendering the View on Browser Resize with React

In the given React application, the goal is to re-render the view when the browser window is resized. This enables the dynamic adjustment of UI elements, such as the positioning of blocks in a Pinterest-like layout.

Using Window Resize Library:

One common approach is to use jQuery's window resize event, as suggested in the question. By adding the following code, you can re-render the component whenever the window is resized:

$( window ).resize(function() {
  // Re-render the component
});

React-Centric Approach:

However, there is a more "React" approach to achieving this using the useEffect Hook. This Hook allows you to perform side effects in a component, such as listening to window events. To use useEffect for window resize, you can define a custom Hook like this:

import React, { useState, useEffect } from 'react';

function useWindowSize() {
  const [size, setSize] = useState([0, 0]);
  useEffect(() => {
    function updateSize() {
      setSize([window.innerWidth, window.innerHeight]);
    }
    window.addEventListener('resize', updateSize);
    updateSize();
    return () => window.removeEventListener('resize', updateSize);
  }, []);
  return size;
}

You can then use this Hook in your component to access the window size and trigger a re-render whenever it changes:

import React, { useState, useEffect } from 'react';
import { useWindowSize } from './useWindowSize';

function MyApp() {
  // ...
  const [windowSize, setWindowSize] = useWindowSize();

  useEffect(() => {
    // Re-render the component when the window size changes
    setWindowSize(useWindowSize());
  }, [windowSize]);

  return (
    // ...
  );
}

This approach is more encapsulated and follows React's lifecycle patterns, keeping your component's code clean and maintainable.

The above is the detailed content of How to Re-render React View on Browser Resize: jQuery vs React-Centric Approach?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn