how to use useref in react code example
Example 1: useRef
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
Example 2: useref react
import React, {useRef, useEffect} from "react";
export default function (props) {
const titleRef = useRef();
useEffect(function () {
setTimeout(() => {
titleRef.current.textContent = "Updated Text"
}, 2000);
}, []);
return <div className="container">
{ }
<div className="title" ref={titleRef}>Original title</div>
</div>
}
Example 3: useRef() in react
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
Example 4: what does useref do react
const refContainer = useRef(initialValue);
Example 5: react reducer hooks
import React from "react";
const initialState = {counter: 0};
const INC = 'INCREMENT';
const DEC = 'DECREMENT';
function incActionCreator() {
return {
type: INC,
}
}
function decActionCreator() {
return {
type: DEC,
}
}
function hooksReducer(state, action) {
switch(action.type) {
case 'INCREMENT':
return {
...state,
counter: state.counter++
}
case 'DECREMENT':
return {
...state,
counter: state.counter--
}
default:
return state;
}
}
function App () {
const [stateAction, setDispatchAction] = React.useReducer(hooksReducer, initialState);
const incClick = (e) => setDispatchAction(incActionCreator())
const decClick = (e) => setDispatchAction(decActionCreator())
return (
<>
<button onClick={incClick}>Incerement</button>
<button onClick={decClick}>Decrement</button>
<h4>Counter: {stateAction.counter}</h4>
</>
);
}
export default App;