How to call a Custom Hook in a React function

Question

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 "useMediaQuery" is called in function "applyStyle" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter

So someone help me how to resolve this issue

This is my code

This is App.js

import React, { useState, useLayoutEffect } from 'react';
import './App.css';


const App = () => {
    const [style, setStyle] = useState(null)


    function useMediaQuery() {
        const [screenSize, setScreenSize] = useState([0]);
        
        useLayoutEffect(() => {
          function updateScreenSize() {
            setScreenSize([window.innerWidth]);
          }
          window.addEventListener("resize", updateScreenSize);
          updateScreenSize();
          return () => window.removeEventListener("resize", updateScreenSize);
        }, []);
        
        return screenSize;
      }

      const applyStyle = () => {
          if(useMediaQuery() === 320) {
              setStyle({
                  marginBottom: '150px'
              })
          }
      }

return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='first'>
                        <button onClick={applyStyle} style={style}  className='btn btn-primary'>Click here</button>
                        <span className='closeWindow'><i className="far fa-window-close"></i></span>
                    </div>
                    <div className='second'>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default App

````

Robert Tirta · Accepted Answer · 2021-06-16 07:15:33Z

1

I think you forgot the 2 most important rules of hook

It says

Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks — your own custom Hooks. We’ll learn about them in a moment.)

So your case should be:

import React, { useState, useLayoutEffect } from 'react';
import './App.css';


const App = () => {
    const [style, setStyle] = useState(null)


    function useMediaQuery() {
        const [screenSize, setScreenSize] = useState([0]);
        
        useLayoutEffect(() => {
          function updateScreenSize() {
            setScreenSize([window.innerWidth]);
          }
          window.addEventListener("resize", updateScreenSize);
          updateScreenSize();
          return () => window.removeEventListener("resize", updateScreenSize);
        }, []);
        
        return screenSize;
      }
      
      const mediaQuery = useMediaQuery();

      const applyStyle = () => {
          if(mediaQuery === 320) {
              setStyle({
                  marginBottom: '150px'
              })
          }
      }

return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='first'>
                        <button onClick={applyStyle} style={style}  className='btn btn-primary'>Click here</button>
                        <span className='closeWindow'><i className="far fa-window-close"></i></span>
                    </div>
                    <div className='second'>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default App

answered Jun 16, 2021 at 7:15

Robert Tirta

2,9193 gold badges23 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cruse Over a year ago

Hi @Robert Titra, thanks for your answer I have one more doubt When I am 0px to 320 px at that time only applyStyle function will call. So when I click button in 320px then Margin bottom will apply for 320 px screen. But after clicking button in 320 px and when I got to 375 px screen here also Margin bottom applied so can you please help me how to resolve this issue.

Robert Tirta Over a year ago

You should open another question so its easier for me to answer there.

Haseeb Anwar · Accepted Answer · 2021-06-16 07:15:19Z

You can use hooks in either the component or a hook, not in functions of a component. So do it like

// also it is better to define your hook outside the component
function useMediaQuery() {
  const [screenSize, setScreenSize] = useState([0]);

  useLayoutEffect(() => {
    function updateScreenSize() {
      setScreenSize([window.innerWidth]);
    }
    window.addEventListener("resize", updateScreenSize);
    updateScreenSize();
    return () => window.removeEventListener("resize", updateScreenSize);
  }, []);

  return screenSize;
}

const App = () => {
  const [style, setStyle] = useState(null);

  // use your custom hook here
  const mediaQuery = useMediaQuery();

  const applyStyle = () => {
    if (mediaQuery === 320) {
      // use hook values
      setStyle({
        marginBottom: "150px",
      });
    }
  };

  return <div>// render something</div>;
};

Collectives™ on Stack Overflow

How to call a Custom Hook in a React function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related