A react `useReducer` with some dependencies - reactjs

Question

i'm creating a react component: TxtEditor
Inside the editor, there is a useReducer hook for manipulating the text:
APPEND => to alter the current text.
UPPERCASE => to convert uppercase letter.
But the reducer function is not a pure function. There are some dependencies:
props.disabled => ignores all the reducer actions.
props.onTxtChanged => will be executed after the text has modified.
So I created the reducer function inside the function component.
This is a problem for useReducer because each time the component rendered, a new identical function with different by reference always re-created.
Thus making useReducer executing the reducer function twice on next render -and- triggering props.onTxtChanged twice too. I don't know why react doing this.
Then to solve the problem, I wrapped the reducer function with useCallback.
It seem be working, but NOT. Because the props.onTxtChanged might be passed by user with an inline function. And the function always be re-created (identical but different by reference), thus making useCallback useless.
And finally I created a reducer function outside the function component.
The function is always the same by reference and making useReducer working properly.
To inject the dependencies I made a HACK like this:
const [state, dispatch] = useReducer(txtReducer, /*initialState: */{
text : 'hello',
props : props, // HACK: a dependency is injected here
});
state.props = props; // HACK: a dependency is updated here
So the props can be accessed in the reducer function:
const txtReducer = (state, action) => {
const props = state.props;
if (props.disabled) return state; // disabled => no change
}
It's working but it contain a hack.
I want the professional way doing this stuff.
Do you have any suggestion?
See the complete sandbox code here

Answer 1

This is what I would do:
function TxtEditor(props) {
const [state, dispatch] = useReducer(txtReducer, { text : 'hello'});
// Wait for the state to change and only then emmit a text change
useEffect(() => {
props.onTextChange(state.text);
}, [state])
return <input onInput={handleInput} />
function handleInput() {
if (props.disabled) return; // <-- just don't fire an update
// [...] call to your reducer
}
}
Reducers are just a useState with a bit of logic. So only let them handle a (singular) state and don't make it responsible for many things at once. Also they should only be responsible for the actual state logic, not something outside, like if the text box is disabled or not.
A potential solution to the desired hook described in the comments of this post:
I hope you don't mind the typescript. I just find it easier to work with.
enum TextProcessorMode {
APPEND,
}
interface TextProcessorActionOptions {
disabled?: boolean;
mode: TextProcessorMode;
}
interface TextProcesserAction {
newText: string;
options: TextProcessorActionOptions;
/**
* Is called when the text was successfully processed.
*/
onChange(text: string): void;
}
export default function textProcessorReducer(
state: string,
action: TextProcesserAction
): string {
if (action.options.disabled) return state;
let newState: string;
switch (action.options.mode) {
case TextProcessorMode.APPEND:
newState = state + action.newText;
break;
// Handle other modes
}
action.onChange(newState);
return newState;
}