Here are some more advanced React concepts and terminologies:
12. Context API
The Context API provides a way to pass data through the component tree without having to pass props manually at every level. It is useful for global data like themes, authentication, or user data.
Example:
const ThemeContext = React.createContext('light');
function ThemedButton() {
return (
<ThemeContext.Consumer>
{theme => <button className={theme}>I am styled by {theme} theme!</button>}
</ThemeContext.Consumer>
);
}
function App() {
return (
<ThemeContext.Provider value="dark">
<ThemedButton />
</ThemeContext.Provider>
);
}
13. Refs
Refs provide a way to access DOM nodes or React elements created in the render method. It’s often used to directly modify a DOM element or manage focus.
Example:
import { useRef } from 'react';
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<div>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</div>
);
}
14. Higher-Order Component (HOC)
An HOC is a function that takes a component and returns a new component. It’s often used to reuse component logic.
Example:
function withLogger(WrappedComponent) {
return function WithLogger(props) {
console.log('Rendering component');
return <WrappedComponent {...props} />;
};
}
const EnhancedComponent = withLogger(MyComponent);
15. React.memo
React.memo is a higher-order component that helps to optimize performance by memoizing a component. If the props haven't changed, the component will skip re-rendering.
Example:
const MyComponent = React.memo(function MyComponent(props) {
return <div>{props.text}</div>;
});
16. useReducer Hook
The useReducer hook is an alternative to useState. It’s useful for managing more complex state logic, especially when the state depends on previous values.
Example:
import { useReducer } from 'react';
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();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<div>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
<span>{state.count}</span>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
</div>
);
}
17. React Fragments
React Fragments let you group a list of children without adding extra nodes to the DOM.
Example:
function Table() {
return (
<>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
</>
);
}
18. Portals
Portals provide a way to render children into a DOM node that exists outside the hierarchy of the parent component.
Example:
import ReactDOM from 'react-dom';
function Modal({ children }) {
return ReactDOM.createPortal(
<div className="modal">{children}</div>,
document.getElementById('modal-root')
);
}
19. Error Boundaries
Error Boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI.
Example:
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
20. Lazy Loading
React supports lazy loading of components, which means components can be loaded asynchronously when they are required, improving performance for large applications.
Example:
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
);
}
21. StrictMode
StrictMode is a tool for highlighting potential problems in an application. It doesn’t render any visible UI but checks for issues like deprecated lifecycle methods.
Example:
function App() {
return (
<React.StrictMode>
<MyComponent />
</React.StrictMode>
);
}
22. Controlled vs Uncontrolled Components
Controlled Components: Form elements where the value is controlled by React state.
Uncontrolled Components: Form elements where the value is handled by the DOM.
Example of Controlled Component:
function ControlledInput() {
const [value, setValue] = useState('');
return (
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
);
}
Example of Uncontrolled Component:
function UncontrolledInput() {
const inputRef = useRef(null);
return <input type="text" ref={inputRef} />;
}
23. Prop Drilling
Prop Drilling occurs when data is passed down through multiple levels of components to reach a deeply nested child. This can be avoided by using Context API or state management libraries.
Example of Prop Drilling:
function Grandparent() {
const name = "John";
return <Parent name={name} />;
}
function Parent({ name }) {
return <Child name={name} />;
}
function Child({ name }) {
return <p>{name}</p>;
}
24. Rendering Lifecycle
React components have a lifecycle with methods that are invoked at different stages, such as mounting, updating, and unmounting.
Lifecycle methods (class components):
- - componentDidMount
- - componentDidUpdate
- - componentWillUnmount
Example:
class MyComponent extends React.Component {
componentDidMount() {
console.log('Component mounted');
}
componentDidUpdate() {
console.log('Component updated');
}
componentWillUnmount() {
console.log('Component will unmount');
}
render() {
return <div>Hello!</div>;
}
}
25. useRef Hook
The useRef hook is used to persist values across renders without causing a re-render. It’s commonly used for accessing DOM elements or storing mutable values.
Example:
function Timer() {
const countRef = useRef(0);
useEffect(() => {
const intervalId = setInterval(() => {
countRef.current += 1;
console.log(countRef.current);
}, 1000);
return () => clearInterval(intervalId);
}, []);
return <p>Check the console to see the timer.</p>;
}
These additional concepts will help you deepen your understanding of React and tackle more advanced scenarios!
Top comments (0)