As an emerging developer diving into new languages everyday, I am so excited to have finally grasped the fundamentals of React. There is so much to love! Though JSX is a language made of function calls that return objects and descriptions, I can’t help but feel like a chef throwing in a sprinkle of HTML here, a dash of Javascript there, and seasoning to taste. After learning React, it is hard to imagine a time when we kept these two languages from constantly co-mingling. The flexibility and versatility of JSX allows React apps to respond intuitively to user interaction while allowing developers to instinctively organize their code and spare unnecessary lines of imperative programming.
React’s organization schema has further altered and improved the way that I think about and organize my code within a project. The language’s reliance on components encourages developers to use modular design and functionality, while considering how all parts of the modules interact in the project’s ecosystem. The end result is more accessible, digestible code. Forms belong in one place, cards are rendered in another, and all components are cleanly nested in a parent component. This modularity makes it easier to target and triage errors, add functionality, and build out apps with speed.
Sharing data between these components is naturally built into React. Props represent the different types of data that can be passed between components. However, the magic of React lies in the ways that React apps dynamically update according to changes from user interaction, changes in the database, and changes spurred by DOM events in general. These changes are recorded in a special variable called by useState, a hook and a function that can update, rerender, and ultimately cause changes in the app’s user interface. The useState variable is accessible to parent and child components, can be updated or applied in a number of different ways, and, most importantly, is stored in the app’s memory as the app’s source of truth.
useState is called within the component function. A const of an array with two variables is assigned to useState. The first variable represents the state, and the second variable represents a function that sets the state. In the example below, useState initially sets the greeting variable to “Hello”, which is then rendered as an h1 on the app.
An example of the useState hook, which initially sets our greeting to “Hello.”
A change in state often occurs upon user interaction. Adding a button that has the user change the greeting represents an opportunity to change state. Within the button’s onClick function, setGreeting is called to randomly select a greeting from an array. A button click will result in the value of greeting being changed to a randomly generated greeting.
Button functionality encourages user interaction. The user expects a change to the user interface upon clicking.
In React, a change in state triggers the app’s component to rerender. The user interface is then a function of the newly updated state. But can we achieve the same results with a local variable instead of using state? Is state an unnecessary hook? Rewriting this code with the same functionality but only using local variables would look something like this:
The same functionality, but without using useState.
When running this code, the user interface does not appear to change, even though the greeting variable visibly changes in the console.
Local variables act and change when called on by events as they would in vanilla Javascript. React, however, specifically requires the useState hook, the state variable, and the setter function working in tandem to actually trigger a rerender of the component or entire app. Changing a local variable behind the scenes simply doesn’t give React the tip off to make a visible user interface change. The useState hook urges developers to be intentional with regards to the app’s source of truth–when the state is changed, what the state is, and where the state goes.
So. Are local variables useful for anything in React apps? If a variable is used behind the scenes to store data or as a reference, sure. In fact, if the user interface does not need updating or rerendering when a variable changes, using local variables (and even some other special React hooks) is preferred over useState to avoid triggering unnecessary rerendering and complication. The specificity of useState is one of the many brilliant ways in which React was designed with declarative, intentional code in mind.
Resoures:
https://blog.devgenius.io/whats-and-why-s-of-state-in-react-8208feb6912e
https://reacttraining.com/blog/how-to-use-and-not-use-state/
https://www.geeksforgeeks.org/re-rendering-components-in-reactjs/