Our great sponsors
-
Hello everyone! I have what feels like a very basic problem, but I fell truly stuck, would appreciate any pointers I have this code in codesanbox: https://codesandbox.io/p/github/muddv/state-update-question/main?file=%2Fsrc%2Fpages%2Findex.tsx Here in index.tsx there are two buttons, the question is basically about the first, “change variable” one. This button calls function from outside the components, from .ts file, this function changes variable according to which I want to set my state for the component above. I want state to change every time this variable changes and I want to know what is the best way to go about it. I am trying to use the useEffect hook for this, and I am confused how it should work or if it is even appropriate in this situation, I tried adding `variable` to the dependencies array for useEffect, but this only prompts this eslintr problem `“Outer scope values like 'variable' aren't valid dependencies because mutating them doesn't re-render the component”` with a link to one of github issues for react: https://github.com/facebook/react/issues/14920 adding anything else I could think of to the array, like state variables does not lead to desirable behavior neither Essentially my question is what would be the best way to make state dependent on an outside variable and can I use useEffect for this. I have been trying to do this for a long time and I feel like i could be missing something really obvious or something from the first paragraph in the documentation. Second button is just to showcase that variable is in fact changing, it directly sets state of the div above. Thanks!
-
However, if this is going to contain the majority of your game's logic, it would benefit you tremendously to learn a global state management library, such as Redux or Zustand, so that you can code-split your game logic into more than one file (Redux docs, Zustand docs) while still keeping it separate from your rendering components. This is highly recommended rather than a single long custom hook file containing lots of useStates.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
However, if this is going to contain the majority of your game's logic, it would benefit you tremendously to learn a global state management library, such as Redux or Zustand, so that you can code-split your game logic into more than one file (Redux docs, Zustand docs) while still keeping it separate from your rendering components. This is highly recommended rather than a single long custom hook file containing lots of useStates.
-
You can still keep your custom hooks in separate files, maybe in a folder called state. You could migrate to a state library when things start to seem unmanageable, or when you want one of the many cool features that a state library can offer, like automatically persisting parts of state to your user's storage using middleware (Redux docs, Zustand docs), easily managing API connections and query caching with RTK Query, or having a log of every state change with the ability to revert/go back in time to debug state changes with Redux Devtools (also works with Zustand).
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
