title: How to call a Custom Hook in a React function
body: <p>I am working on a React project in my project I have one custom hook, Now I am trying to call that custom hook in one function but it is showing error like this React Hook &quot;useMediaQuery&quot; is called in function &quot;applyStyle&quot; that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter</p>
  <p>So someone help me how to resolve this issue</p>
  <p>This is my code</p>
  <p>This is App.js</p>
  <pre><code>import React, { useState, useLayoutEffect } from 'react';
  import './App.css';
  
  
  const App = () =&gt; {
      const [style, setStyle] = useState(null)
  
  
      function useMediaQuery() {
          const [screenSize, setScreenSize] = useState([0]);
          
          useLayoutEffect(() =&gt; {
            function updateScreenSize() {
              setScreenSize([window.innerWidth]);
            }
            window.addEventListener(&quot;resize&quot;, updateScreenSize);
            updateScreenSize();
            return () =&gt; window.removeEventListener(&quot;resize&quot;, updateScreenSize);
          }, []);
          
          return screenSize;
        }
  
        const applyStyle = () =&gt; {
            if(useMediaQuery() === 320) {
                setStyle({
                    marginBottom: '150px'
                })
            }
        }
  
  return (
          &lt;div className='container'&gt;
              &lt;div className='row'&gt;
                  &lt;div className='col-12'&gt;
                      &lt;div className='first'&gt;
                          &lt;button onClick={applyStyle} style={style}  className='btn btn-primary'&gt;Click here&lt;/button&gt;
                          &lt;span className='closeWindow'&gt;&lt;i className=&quot;far fa-window-close&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div className='second'&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  export default App
  
  ````
  </code></pre>