Example of a functional component in React that uses React Hooks to manage state within the component

Header.jsx

import React, { useState, useRef, useEffect } from 'react';
import MobileDrawer from 'src/components/Client/UI/Menu/MenuSubComponents/MobileDrawer';
import { Icon } from 'antd';
import Router from 'next/router';
import Logo from 'src/components/Client/UI/HeaderSubComponents/Logo';
import Searchbar from 'src/components/Client/UI/HeaderSubComponents/SearchBar';
import Menu from 'src/components/Client/UI/Menu/Menu';
import SignIn from 'src/components/Client/UI/HeaderSubComponents/SignIn';

const headerVerticalBar = {
  width: '3px',
  borderLeft: '2px solid white',
  height: '20px',
};

const Header = () => {
  const [isSearchOpen, setSearchOpen] = useState(false);
  const [{ width }, setDimension] = useState({ width: 0, height: 0 });
  const inputEl = useRef(null);

  const searchClicked = () => {
    setSearchOpen(!isSearchOpen);
  };

  const updateWindowDimensions = () => {
    setDimension({ width: window.innerWidth, height: window.innerHeight });
  };

  useEffect(() => {
    Router.events.on('routeChangeComplete', () => { window.scrollTo(0, 0); });
    window.addEventListener('resize', updateWindowDimensions);
    return () => window.removeEventListener('resize', updateWindowDimensions);
  }, []);

  return (
    <div className="header-wrapper" id="header">
      <header ref={inputEl}>
        <div className="nav-left">
          <MobileDrawer viewportWidth={width} />
          <Logo />
          <Menu isSearchOpen={isSearchOpen} />
        </div>
        <div className="header-separator" style={isSearchOpen ? { display: 'none' } : headerVerticalBar} />
        <div className="nav-right">
          <Searchbar isSearchOpen={isSearchOpen} />
          <button type="button" onClick={() => searchClicked()} className="search-btn">
            {isSearchOpen ? <Icon type="close" /> : <Icon type="search" />}
          </button>
          <div className="user-profile" hidden={isSearchOpen}>
            <SignIn viewportWidth={width} />
          </div>
        </div>
      </header>
    </div>
  );
};

export default Header;