As a Flatiron School student, I just spent a few weeks
studying React as part of Phase 2 of the Software Engineering
program. React builds on JavaScript and is all-around a pretty powerful tool. There are still some quirky syntax requirements, but after being thrown into the deep end while learning JavaScript, it wasn’t too bad. We learned about props and components and that went well enough, but when the conversation turned to state and events, I had a pretty hard time parsing the idea of state in my head.
Dictionaries define state basically as what condition
something is in. This does work out and is pretty easy to
understand in some cases. If you have a situation where you’re working with a toggle or something similar, a Boolean value works fine. Then, state actually refers to a condition, true or false. There are situations where you have strings and arrays assigned to a piece of state and I had a very hard time understanding how those things had a “condition”. I resigned myself to working without really understanding state and that led to a decision to move forward without really getting what was in front of me already.
Moving forward at that point was kind of a bad idea. I got
into a situation where I was coding without understanding why I was doing things. I was simply pattern matching and rewriting code without an appreciation of how it worked. This led to a lot of frustration that could have been avoided had I just stuck it out and wrapped my head around what is actually going on with state. My first step was losing this need to have state as used in React match my idea of what book-definition state was.
Assigning a variable to state just allows React to hold on
to the values of these variables and change them, usually with event handling and will re-render the component when the state is changed. This is why it’s important not to implicitly re-value a variable assigned to state. Doing so will not allow React to keep up with the state and it won’t re-render the page. I was getting lost in the weeds trying to figuring out how adding a new object to an array was fundamentally changing the “state” of the variable. It wasn’t - I was just being kind of inflexible and not using the term “state” in a way that I hadn’t come across before. Once I understood what state was and what it was doing, I was able
to get over the fact that it was labeled a word I found misleading at first.
As I did a lot of reading and panicky searches of “what is
react state”, I came across the origin of the term. It is
referring to Finite-State Machines. State machines are not literal machines, but are abstractions with have a number of states which are changed in response to inputs. I wish I had gone down the rabbit hole a lot earlier, as understanding that concept helped me understand state in React. Also, one thing this process has taught me is to walk before you run!
Top comments (0)