React "state" should be the least difficult concept to understand but it isn't. Or is it?
Open Figma or Sketch.
Create a button and label it 'Buy Now'.
Duplicate the button and make it look as if it were disabled.
Your UI kit now consists of two states.
You're done. Now pass the UI kit over to the developer.
Here's where it gets difficult.
"State" is not so simple for developers. For instance, the developer may have to connect to the inventory API to determine the state of the 'Buy Now' button. And, this has to be done before the button appears on the webpage. If available, show the 'Buy Now' and if out of stock show the disabled state. Only a couple hours of programming if all goes well.
Hold on. The product was sold out before the shopper had an opportunity to click the "Buy Now" button. The developer needs to take that into consideration, connect to the inventory API once again, and then provide a pop up which informs the shopper it is not available.
Here's where it gets extremely difficult.
"State" is not so simple for designers. For instance, the pop up is hideous. The UI kit did not include the state(s) for the pop up. Oops.
Open up Figma or Sketch again.
Design the states for the pop up.
Watch as the developer goes into a "state" of rage after finding out it needs to be redeveloped.
In summary, state is what an element visually looks like at any given moment. Designers plan for each state while developers figure out how to make it happen using APIs, JavaScript, HTML, JSX, CSS, Sass, React, etc.
Top comments (0)