Suggestion for new syntax of React reducers + context

Francis Vila — Tue, 12 Mar 2024 11:05:33 +0000

The suggestion is this codesandbox.

I was impressed by the example suggested in Scaling Up with Reducer and Context. I spent some time understanding it, and had an idea that the advantages of this technique would justify offering a simpler way of achieving it. Seeing that the React team spectacularly simplified the syntax of function components as compared to the Component class, I hope this is in the spirit of what they are striving to achieve.

The example presented here is forked and edited from the example presented in Scaling Up with Reducer and Context. The syntax suggested here would, if implemented, produce the same effect.

Obviously, the code presented here does not currently function correctly.

The suggestion involves:

one new hook, named useContextReducer in the example. It combines the effect of useReducer and useContext.
a function to retrieve the state from the parent component, named fetchContextReducer in the example.

I see several advantages to this approach:

less code: the file TaskContext.js from the previous example becomes redundant.
code is closer to where it is used: namely in the handlers of the components that trigger them, rather than abstracted via dispatchers, type, etc.
syntax is similar to that of useState, making it more familiar for entry-level React developers

Why the .current in useRef variables?

Francis Vila — Tue, 28 Jun 2022 07:14:29 +0000

When you declare a useState variable like this:
const [stateTitle, stateTitle_set] = useState('Hello State World!');
when you need to use it, in JSX for example, you just enter the name of the variable.
<h1>{stateTitle}</h1>

But when you declare a useRef variable like this:
const refTitle=useRef("Hello Ref World!");
every time you use that variable, you have to add in the .current suffix.
<h1>{refTitle.current}</h1>

I don't see how it is possible to use the name of the reference variable without the .current suffix. And the .current is the only suffix I see suggested by intellisense, so I don't see what other suffix might replace it.

In conclusion, I don't see why React can't just understand that refTitle means refTitle.current. Why you can't just write:
<h1>{refTitle}</h1>

DEV Community: Francis Vila

Suggestion for new syntax of React reducers + context

Why the .current in useRef variables?