Utilizing [Javascript proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) this custom changes the [default way of setting s](https://react.dev/learn/managing-state)tate in React which is a function that requires a function. By using this hook simply assigning value to state will result same as setState. It’s really a wrapper around useState. Here is usProxyState simple 20 lines of code. [https://github.com/Sourav9063/watchtogether/blob/master/src/helper/hooks/useProxyState.js](https://github.com/Sourav9063/watchtogether/blob/master/src/helper/hooks/useProxyState.js) ```javascript import { useState } from "react"; export const useProxyState = (initialState = {}) => { if (typeof initialState != "object") { initialState = { value: initialState }; } const [state, setState] = useState(initialState); state.setState = setState; const handler = { set(_, prop, value) { if (value !== state[prop]) { setState((state) => { return { ...state, [prop]: value }; }); } return Reflect.set(...arguments); }, }; const stateProxy = new Proxy(state, handler); return stateProxy; }; ``` Notes * For Object type state, direct assignment will work i.e. `state.count`. Any other type state you can access and modify via `state.value` * You can get the default setState in `state.setState()` ```javascript const state1 = useProxyState({ count: 1 }); const state2 = useProxyState(1); //... state1.count = 100; state2.value = 200; ``` ## Comparisons useProxyState ```javascript "use client"; import { useProxyState } from "@/helper/hooks/useProxyState"; import styles from "../page.module.css"; export default function Personal() { const state1 = useProxyState({ count: 1 });// object const state2 = useProxyState(state1.count * 2);// not object state2.value = state1.count * 2; //no need for useEffect. And cannot be changed else where. return ( <>

); } ``` Default useState ```javascript "use client"; import styles from "../page.module.css"; import { useEffect, useState } from "react"; export default function Personal() { const [state3, setState3] = useState({ count: 1, }); const [state4, setState4] = useState(state3.count * 2); useEffect(() => { setState4(state3.count * 2); return () => {}; }, [state3.count]); return ( <>

); } ``` [Demo](https://syncplay.vercel.app/use-proxy-state) [Source](https://github.com/Sourav9063/watchtogether/blob/master/src/app/use-proxy-state/page.js) GITHUB: [sourav9063](https://github.com/Sourav9063) WEBSITE: [https://sourav9063.github.io/](https://sourav9063.github.io/) LINKDIN: [sourav-ahmed](https://www.linkedin.com/in/sourav-ahmed/)

sourav9063

QWIK state management syntax for React with a custom hook. Alternative to setState.

Join Our Newsletter. No Spam, Only the good stuff.