And if you’ve struggled with poor state management, I suggest that you get hooked too.
I’ve been flirting with coding for as long as I’ve been able to read. It’s always brought me a lot of joy and – even as a data guru/amateur coder – it’s even proven to be a differentiator for me, in the workplace. But, as an amateur coder, I have felt some frustrations based on my limited knowledge, and – frankly – the limits of the tools I was working with (I’m looking at you, VBA).
I can’t count the number of projects I’ve built where I would have given my last dollar for a simple, straightforward, out-of-the-box way to manage state with little overhead. But, instead, I plodded along with a ton of variables, different setter expressions for every situation, and code that was basically unreadable by anyone who wasn’t me. What a nightmare!
It's not what happens to you, but how you React, that counts
When I got my hands on React, I had no idea what I was in for. From the outset, it made web-app development much simpler and cleaner than the HTML/CSS/JavaScript paradigm. But when I learned about hooks, I realized that my prayers had been answered and that someone, somewhere understood and appreciated my frustrations.
Hooks, for folks who’ve never worked with React, are powerful tools that ‘hook into’ React’s lifecycle and state management features from within a functional component. In essence, a hook is a function that holds data in state and returns data and/or other useful items. All React hooks names are rendered in camel case and begin with the word ‘use’. This convention makes hooks instantly recognizable.
React has some simple and brilliant built-in hooks:
useState – the most fundamental of all – enables a developer to store a piece of data in state and returns variables pointing to the data, itself, and a setter function to change the value of the data in state. This can act as the control center for something as mundane as a dark mode/light mode toggle variable all the way to an object containing the values of all data inputted by a user into a controlled form. This simple hook forms the bedrock that underpins every other hook.
useEffect enables developers to run code, in the form of a callback function, as a side effect of the component’s lifecycle events (mount and unmount) and as a side effect of changes to the values of state variables. Let’s say a username is stored in state; useEffect could be employed to run whenever the username changes, to say good-bye to the previous user and to greet the new one.
A hook isn’t just a catch—it’s a lifeline - ChatGPT
As I began to use these simple hooks, and a few others, I began to realize just how easy they made my life, as a developer. And, as I progressed in my course, I learned something that has changed the way I code in every other language that I use: custom hooks. Yes, with various combinations of useState, other React hooks, and some ingenuity, a developer can write their own hooks for any stateful operation.
I had been having anxiety about a controlled form that updated state on the change in value of any of 2 dozen fields, causing a re-render on every. single. keystroke. I had been having nightmares about a simple button that allowed users to decrement a value by one, causing a fetch request to the server on every. single. click. I thought that there must be a way to throttle the onChange listeners in the form or the onClick listener on the button, delaying re-renders and/or fetch operations until the user was finished inputting. That’s when I learned about useDebounce, a custom hook that tracks multiple clicks or keystrokes and only sends it to the server or sets it to state when the clicking or typing stopped for at least 2 seconds. Hallelujah!
When I found out how relatively simple it was to create something like this, I began to look at other custom hooks that other folks had written and there are some brilliant and useful ones out there. And, finally, I tried my hand at writing my own custom hook – useFetch.
The more that I’ve played around with these fantastic little gems, the more my thinking about state management changed. I didn’t realize it until I was at work several days later, as I approached a problem in VBA, for an Access project. I realized that I needed a hook. I also realized that, if I created a variable in the global scope, set its default on execution start, and defined a setter function for that variable… I basically had a useState hook (albeit in 3 pieces). And, because my React training hit home the importance of never updating state variables directly, naming them and their setter functions, accordingly, keeping the declaration at the highest level in the scope… good state management practices were baked into my methodology.
I’m under no illusions that I’ll ever get VBA to be great with state management. It’s just not built for that. But learning about something as seemingly simple, like hooks, taught me not only how to use them and create them, but also how to think in terms of their utility when designing code in other, less-accommodating languages.
Top comments (0)