Batrachophreno
0d92359da7
Re-creation of https://github.com/Aurorastation/Aurora.3/pull/21046 to skip merge conflict hell. Brings us modern TGUI. **ALTERNATE TITLE: TGUI HELLSCAPE PR ABANDON ALL HOPE YE WHO ENTER HERE** - [x] Migrate build tools (javascript -> typescript, bun for package management). - [x] Upgrade all TGUI dependencies and associated root files to TG-congruent versions (axios, babel, dompurify, eslint, highlight, marked, prettier, sass, source-map, stacktrace-parser, typescript). - [x] InfernoJS -> React migrations - [x] React cleanup and polish (migrate all remaining .js files to appropriate .ts or .tsx filetype, all remaining hooks, linting, error corrections, etc.) - [ ] Test all remaining TGUI interfaces
1.6 KiB
Managing component state
React has excellent documentation on useState and useEffect. These hooks should be the ways to manage state in TGUI (v5). React Hooks
You might find usages of useLocalState. This should be considered deprecated and will be removed in the future. In older versions of TGUI, InfernoJS did not have hooks, so these were used to manage state. useSharedState is still used in some places where uis are considered "IC" and user input is shared with all persons at the console/machine/thing.
A Note on State
Many beginners tend to overuse state (or hooks all together). State is effective when you want to implement user interactivity, or are handling asynchronous data, but if you are simply using state to store a value that is not changing, you should consider using a variable instead.
In previous versions of React, each setState would trigger a re-render, which would cause poorly written components to cascade re-render on each page load. Messy! Though this is no longer the case with batch rendering, it's still worthwhile to point out that you might be overusing it.
Derived state
One great way to cut back on state usage is by using props or other state as the basis for a variable. You'll see many examples of this in the TGUI codebase. What does this mean? Here's an example:
// Bad
const [count, setCount] = useState(0);
const [isEven, setIsEven] = useState(false);
useEffect(() => {
setIsEven(count % 2 === 0);
}, [count]);
// Good!
const [count, setCount] = useState(0);
const isEven = count % 2 === 0; // Derived state