As a senior developer, mastering React is essential for building high-performance, scalable applications. While you may already be familiar with the basics, there are numerous advanced techniques that can elevate your React skills and improve your applications. In this article, we’ll explore 30 advanced React techniques that every senior developer should know.
Advanced React Techniques
1. Custom Hooks
Custom hooks allow you to extract component logic into reusable functions. This promotes code reuse and keeps your components clean. For example, you can create a useFetch hook to handle API calls.
import { useState, useEffect } from 'react';
const useFetch = (url) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
const response = await fetch(url);
const result = await response.json();
setData(result);
setLoading(false);
};
fetchData();
}, [url]);
return { data, loading };
};2. Context API
The Context API provides a way to share values between components without prop drilling. This is particularly useful for global state management.
const ThemeContext = React.createContext();
const App = () => {
return (
<ThemeContext.Provider value={{ theme: 'dark' }}>
<Toolbar />
</ThemeContext.Provider>
);
};3. React.memo
React.memo is a higher-order component that prevents unnecessary re-renders of functional components by memoizing the output.
const MyComponent = React.memo(({ data }) => {
// Component logic
});4. useMemo and useCallback
useMemo and useCallback are hooks that help optimize performance by memoizing values and functions, respectively.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);5. Error Boundaries
Error boundaries are React components that catch JavaScript errors in their child component tree, preventing crashes and providing fallback UI.
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// Log error
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}6. React.lazy and Suspense
React.lazy allows you to dynamically import components, enabling code-splitting. Use Suspense to handle loading states.
const LazyComponent = React.lazy(() => import('./LazyComponent'));
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>7. Higher-Order Components (HOCs)
HOCs are functions that take a component and return a new component, allowing you to add additional functionality.
const withLogging = (WrappedComponent) => {
return class extends React.Component {
componentDidMount() {
console.log('Component mounted');
}
render() {
return <WrappedComponent {...this.props} />;
}
};
};8. Render Props
Render props is a technique for sharing code between components using a prop that is a function.
const DataProvider = ({ render }) => {
const data = fetchData();
return render(data);
};
// Usage
<DataProvider render={(data) => <MyComponent data={data} />} />9. Portals
Portals provide a way to render children into a DOM node that exists outside the parent component’s hierarchy.
ReactDOM.createPortal(
<div>Portal Content</div>,
document.getElementById('portal-root')
);10. Fragments
Use React.Fragment to group multiple elements without adding extra nodes to the DOM.
return (
<React.Fragment>
<Child1 />
<Child2 />
</React.Fragment>
);11. Controlled vs. Uncontrolled Components
Understand the difference between controlled and uncontrolled components to manage form data effectively.
// Controlled Component
const ControlledInput = ({ value, onChange }) => (
<input value={value} onChange={onChange} />
);
// Uncontrolled Component
const UncontrolledInput = () => {
const inputRef = useRef();
return <input ref={inputRef} />;
};## 12. useReducer
useReducer is a hook that is useful for managing complex state logic in functional components, similar to Redux.
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</>
);
};13. useLayoutEffect
useLayoutEffect is similar to useEffect, but it fires synchronously after all DOM mutations. It’s useful for reading layout from the DOM and synchronously re-rendering.
useLayoutEffect(() => {
// Code to read layout
}, [dependencies]);14. useImperativeHandle
useImperativeHandle customizes the instance value that is exposed when using ref in parent components.
const FancyInput = React.forwardRef((props, ref) => {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
},
}));
return <input ref={inputRef} />;
});15. React Profiler
The React Profiler API allows you to measure the performance of your React application and identify performance bottlenecks.
<Profiler id="MyComponent" onRender={(id, phase, actualDuration) => {
console.log({ id, phase, actualDuration });
}}>
<MyComponent />
</Profiler>16. Static Type Checking with TypeScript
Integrate TypeScript with React to catch errors at compile time and improve code quality through static type checking.
interface Props {
name: string;
}
const Greeting: React.FC<Props> = ({ name }) => <h1>Hello, {name}!</h1>;17. Server-Side Rendering (SSR)
Implement server-side rendering to improve performance and SEO by rendering React components on the server.
import express from 'express';
import { renderToString } from 'react-dom/server';
import App from './App';
const app = express();
app.get('/', (req, res) => {
const html = renderToString(<App />);
res.send(`<!DOCTYPE html><html><body>${html}</body></html>`);
});18. Static Site Generation (SSG)
Use frameworks like Next.js for static site generation, allowing you to pre-render pages at build time for better performance.
export async function getStaticProps() {
const data = await fetchData();
return { props: { data } };
}19. React Query
Utilize React Query for data fetching, caching, and synchronization, simplifying the management of server state.
const { data, error, isLoading } = useQuery('todos', fetchTodos);20. Code Splitting
Implement code splitting to load parts of your application on demand, improving initial load time.
const LazyComponent = React.lazy(() => import('./LazyComponent'));21. CSS-in-JS
Explore CSS-in-JS libraries like styled-components or Emotion for styling components with JavaScript.
import styled from 'styled-components';
const Button = styled.button`
background: blue;
color: white;
`;22. React Router
Use React Router for declarative routing in your application, enabling navigation between different views.
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
<Router>
<Switch>
<Route path="/about" component={About} />
<Route path="/" component={Home} />
</Switch>
</Router>23. Testing with React Testing Library
Write tests for your components using React Testing Library to ensure they behave as expected.
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';
test('renders learn react link', () => {
render(<MyComponent />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});24. Accessibility (a11y)
Ensure your React applications are accessible by following best practices and using tools like react-axe.
import { useEffect } from 'react';
import { reactAxe } from 'react-axe';
useEffect(() => {
if (process.env.NODE_ENV !== 'production') {
reactAxe(React, ReactDOM, 1000);
}
}, []);25. Progressive Web Apps (PWAs)
Transform your React application into a Progressive Web App to enhance performance and provide offline capabilities.
// Registering a service worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}26. WebSockets
Implement WebSockets for real-time communication in your React applications, enabling features like live chat.
const socket = new WebSocket('ws://your-websocket-url');
socket.onmessage = (event) => {
console.log('Message from server ', event.data);
};27. React DevTools
Utilize React DevTools for debugging and profiling your React applications, providing insights into component hierarchies and performance.
28. Internationalization (i18n)
Incorporate internationalization libraries like react-i18next to support multiple languages in your application.
import { useTranslation } from 'react-i18next';
const MyComponent = () => {
const { t } = useTranslation();
return <h1>{t('welcome_message')}</h1>;
};29. State Management Libraries
Explore state management libraries like Redux, MobX, or Zustand for managing complex application state.
import { createStore } from 'redux';
const store = createStore(reducer);30. Performance Optimization Techniques
Implement various performance optimization techniques, such as lazy loading images, optimizing bundle size, and using service workers for caching.
const LazyImage = ({ src, alt }) => {
const [isVisible, setIsVisible] = useState(false);
const handleScroll = () => {
const rect = imgRef.current.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom > 0) {
setIsVisible(true);
window.removeEventListener('scroll', handleScroll);
}
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
return isVisible ? <img src={src} alt={alt} /> : <div>Loading...</div>;
};By mastering these advanced React techniques, senior developers can build more efficient, maintainable, and scalable applications. Embrace these practices to enhance your React development skills and stay ahead in the ever-evolving landscape of web development.