infinite loop with basic hook example in CRA, Gatsby, etc #97
Description
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