Why it is not re-rendering the component even though current is changed. I know it can be done with useState.
const onDecrement = () => {
counter.current -= 1;
};
const onIncrement = () => {
counter.current += 1;
};
const onReset = () => {
counter.current = 0;
};
useEffect(() => {
// It should trigger this
console.log('re-render');
}, [counter.current]);
Playground: https://stackblitz.com/edit/react-ts-xtamop?file=useFetch.tsx,App.tsx
>Solution :
useRef are used to avoid re-render as opposed to useState which causes re-render when change happens.
As for your context, you can assign the ref to the div element and use the inntertext to assign values
const counter = useRef<HTMLDivElement>(null);
const onDecrement = () => {
counter.current.innerText = `${Number(counter.current.innerText) - 1}`;
};
const onIncrement = () => {
counter.current.innerText = `${Number(counter.current.innerText) + 1}`;
};
const onReset = () => {
counter.current.innerText = '0';
};
// only executes in the initial render
useEffect(() => {
console.log('re-render');
counter.current.innerText = '0';
}, [counter.current]);
return (
<div>
<button onClick={onDecrement}>-</button>
<div
ref={counter}
style={{ display: 'inline-block', margin: '0 10px' }}
></div>
<button onClick={onIncrement}>+</button>
<div style={{ marginTop: '10px' }}>
<button onClick={onReset}>Reset</button>
</div>
</div>