use callback react 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: react callback
import React, {useState} from 'react';
function newCallback(callback) {
callback('This can be any value you want to return')
}
const Callback = () => {
const [callbackData, setCallbackData] = useState('')
function actionAferCallback (callback) {
setCallbackData(callback)
}
function requestCallback() {
newCallback(actionAferCallback)
}
return(
<div>
{}
<button onClick={() => {requestCallback()}}>Request Callback</button>
{callbackData}
</div>
)
}
export default Callback;
Example 3: 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;