infinite loop with basic hook example in CRA, Gatsby, etc

[fbegue]

I'm sure this must be user error - but when I tried to pull the library into my project, anywhere I try to use the hook (and print the params value), the component using it runs itself infinitely. This feels like a loop triggered by the value of the hook changing, but the output is always the same:

App.js:18 {width-between-400-and-599: false, width-larger-than-600: false}
App.js:18 {width-between-400-and-599: false, width-larger-than-600: false}
App.js:18 {width-between-400-and-599: false, width-larger-than-600: false}

you get the idea.

I then tried to make a fresh Gatsby app then a fresh CRA app with just the hook example like so:

//app.js

import React from 'react'
import classnames from 'classnames';
import { useContainerQuery } from 'react-container-query';

function App() {
  const query = {
    'width-between-400-and-599': {
      minWidth: 400,
      maxWidth: 599,
    },
    'width-larger-than-600': {
      minWidth: 600,
    },
  };
  const [params, containerRef] = useContainerQuery(query);
  console.log(params);

  return (
    <div className="App">
          <div ref={containerRef} className={classnames(params)}>container</div>
    </div>
  );
}
export default App;

//package.json

  "dependencies": {
    "classnames": "2.3.1",
    "gatsby": "^3.2.1",
    "react": "^16.0.0-0",
    "react-container-query": "0.12.0",
    "react-dom": "^16.0.0-0",
    "react-scripts": "3.0.1",
    "react-split-pane": "0.1.92"
  }

But in both cases, same outcome. Looking for help to determine what I'm missing here?

Have a the working example in a codebox here btw, what gives!?
https://codesandbox.io/s/react-container-query-xqvy4

Thanks

[mayank23]

Hey @fbegue , it might be because you put the query object

  const query = {
    'width-between-400-and-599': {
      minWidth: 400,
      maxWidth: 599,
    },
    'width-larger-than-600': {
      minWidth: 600,
    },
  };

within the render function.

In this case, each time the component re-renders a new query object is created and the hook will think you are passing in a new query, triggering this loop.

In the codesandbox you linked, you have the query outside the render function, and it seems to be working as expected, no loop there.

[zur4ik]

Hey @fbegue , it might be because you put the query object

  const query = {
    'width-between-400-and-599': {
      minWidth: 400,
      maxWidth: 599,
    },
    'width-larger-than-600': {
      minWidth: 600,
    },
  };

within the render function.

In this case, each time the component re-renders a new query object is created and the hook will think you are passing in a new query, triggering this loop.

In the codesandbox you linked, you have the query outside the render function, and it seems to be working as expected, no loop there.

You saved my day!