React practice project:
useCallbackhook: avoids recreation of a function (which would generate a new prop if passed to children components). Usually needed if you have a function as dependency of useEffectmemo: Wraps a component, if its props do not change, memo prevents component reexecution (triggered by ancestor components)useMemo: React executes isPrime(initialCount) and saves the result, only reexecutes if any dependency changes (array args)
Working with React Refs (useRef) and Portals (createPortal), and exposing APIs via useImperativeHandle.
- create context component in a separate module:
export const ThemeContext = React.createContext({
theme: 'light',
toggleTheme: () => {},
});
export default function ThemeContextProvider({ children }) {
const [theme, setTheme] = React.useState('light');
const toggleTheme = () => {
setTheme((prevTheme) => {
return prevTheme === 'light' ? 'dark' : 'light';
});
};
return (
// { theme, toggleTheme } -> returns an object, keys are variable names theme and toggleTheme, values are variable values 'light' and f()
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}
- Wrap the main component
function App() {
return (
<ThemeContextProvider>
<Page />
</ThemeContextProvider>
);
}
- Import context in descendant components
import { ThemeContext } from './ThemeContextProvider';
const themeCtx = React.useContext(ThemeContext);
const className = themeCtx.theme
Check shopping-cart-contex.jsx comments and App and Product components
Project planner web app built with React: npm run dev -- --host
React project for practicing:
- Side Effects
useEffecthook and cleanup- sync state using useEffect in
Modal.jsx useCallbackhook to avoid recursion inuseEffectsetTimeout,clearTimeout,setInterval,clearIntervalJavaScript APIslocalStorage.getItem,localStorage.setItemfor local storage andnavigator.geolocation.getCurrentPositionfor geolocation browser APIs
- Fetch data from a backend,
node ./backend/app.js,npm run dev -- --host - GET and PUT HTTP requests with
fetchJS function inhttp.jsfile - Error handling in the async network requests
- Fetch data from a backend,
node ./backend/app.js,npm run dev -- --host - GET and PUT HTTP requests with
fetchJS function inhttp.jsfile - Error handling in the async network requests
- Use custom Hook to reuse functionality
hooks/useFetch.js