Quick react setup with Hook

Import react
If I am using hook, set up hook when I am calling react.
If I am also using context, set up context when I am calling react.
In case if I want to use lazy <-- which makes load more efficiently, I can also load it in React

import React, { useContext, useState, useEffect lazy, Suspense} from 'react';

If I am using Context, load context file

import { ContextFile } from '../Context.jsx';

If there is a component that needs lazy, import it using lazy

const TestComponent = lazy(() => import('./testComponent.jsx'));

Create component function that can be export
declare functions that I am going to use from context
create hook if I need it

function App() {
  //context
  const { functionOne, functionTwo } = useContext(ContextFile);
  //hook
  const [testHook, setTestHook] = useState(initialValue);

  //update state function
  const ifStateNeedsUpdate = () => {
    setTestHook(whateverNewData);
  }

  const GetRequest = async () => {
   await getRequest here
  }

  //if I want to update hook only in certain situation, I can use useEffect to update hook for ex.
  useEffect(() => {
    setTestHook(whateverUpdate);
  }
}, [itWillonlyUpdateIfThisValueChanges]);

  return (
    <div> Hello, World </div>
  )
}

export default App;

Blog

Quick react setup with Hook

Edrick Ee

Join Our Newsletter. No Spam, Only the good stuff.

Related