Purpose:
Give unique IDs to accessibility keys or attributes which would be identical in client and server (SSR).
const MyComponent = () => {
const id = useId();
return (
<div>
<label htmlFor={id}>Username:</label>
<input id={id} type="text" />
</div>
);
};
Why Use It?
Resolves server side and client side control ID conflicts.
Purpose:
New hook for subscribing to external stores in a way that is compatible with concurrent rendering.
import { useSyncExternalStore } from 'react';
const subscribe = (callback) => {
window.addEventListener('resize', callback);
return () => window.removeEventListener('resize', callback);
};
const getSnapshot = () => window.innerWidth;
function WindowWidth() {
const width = useSyncExternalStore(subscribe, getSnapshot);
return <div>Window width: {width}</div>;
}
Why Use It?
Guarantees consistent reads from the external stores with multi-threaded rendering.
Purpose:
Hook injecting styles in advance prior to DOM mutation and the best in conjunction with CSS in JS libraries.
import { useInsertionEffect } from 'react';
const MyComponent = () => {
useInsertionEffect(() => {
const style = document.createElement('style');
style.textContent = '.my-class { color: red; }';
document.head.appendChild(style);
return () => document.head.removeChild(style);
}, []);
return <div className="my-class">Styled Text</div>;
};
Why Use It?
Prevents style flicker during hydrating or re-rendering.
Ready to transform your business with our technology solutions? Contact Us today to Leverage Our ReactJS Expertise.