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;
Top comments (0)