Lazy Loading
Lazy loading is a way to make websites faster by waiting to load things like images and scripts until they are
actually needed. Instead of loading everything at once when the page first opens, lazy loading only loads
what's necessary right away and gets the rest later when it’s needed. This helps the page load quicker and
run better..
In React, lazy loading can be implemented using React.lazy and Suspense:
jsx
Копировать код
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
);
}
export default App;
Hooks
React hooks are functions that let you use state and other React features in functional components.
They were introduced in React 16.8.
High Order Component (HOC)
A Higher-Order Component (HOC) is a function that takes a component and returns a new
component. HOCs are used to reuse component logic.
Example of a HOC:
jsx
Копировать код
function withLogging(WrappedComponent) {
return class extends React.Component {
componentDidMount() {
console.log('Component Mounted');
}
render() {
return <WrappedComponent {...this.props} />;
}
};
}
React.memo
React.memo is a higher-order component that memoizes a component to prevent unnecessary re-
renders. It performs a shallow comparison of props and skips rendering if the props haven't
changed.
Example:
jsx
Копировать код
const MyComponent = React.memo(function MyComponent(props) {
/* render using props */
});
useMemo
useMemo is a React hook that memoizes the result of a computation to avoid recalculating it on
every render. It is useful for optimizing performance.
Example:
jsx
Копировать код
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
useCallback
useCallback is a React hook that returns a memoized version of a callback function, which is
useful when passing callbacks to optimized child components that rely on reference equality to
prevent unnecessary renders.
Example:
jsx
Копировать код
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);
useRef
useRef is a React hook that returns a mutable ref object whose .current property is initialized to
the passed argument. It can be used to persist values across renders or directly access DOM
elements.
Example:
jsx
Копировать код
const inputRef = useRef(null);
function focusInput() {
inputRef.current.focus();
}
return <input ref={inputRef} />;
useEffect
useEffect is a React hook that runs side effects in functional components. It replaces lifecycle
methods like componentDidMount, componentDidUpdate, and componentWillUnmount.
Example:
jsx
Копировать код
useEffect(() => {
// code to run on mount
return () => {
// cleanup code to run on unmount
};
}, [dependencies]); // runs effect when dependencies change
Context API
The Context API is a React feature that allows you to pass data through the component tree without
having to pass props down manually at every level. It's useful for global state management.
Example:
jsx
Копировать код
const MyContext = React.createContext();
function MyProvider({ children }) {
const [state, setState] = useState(initialState);
return (
<MyContext.Provider value={{ state, setState }}>
{children}
</MyContext.Provider>
);
}
function MyComponent() {
const { state, setState } = useContext(MyContext);
return <div>{state}</div>;
}
These are the main concepts you'll need to know. If you have more specific questions about any of
these topics, feel free to ask!
