Designing React States

 

Why We Need to Design States

We already know that we should use state if we want the component to change the content it is rendering. What we don't have answers for yet is: when should state be called? what type of data should the state be? in which component is it defined?

This design process will pay off when trying to answer these questions in complicated projects so practice it with simple projects first. 

It follows three main steps: distinguish states from events, distinguish the variable name and data type for the state, distinguish which component should house this state according to the other components that will need it as props 

State Design Process

Distinguishing State from Event

First, we have to figure out what will be a state and what will be an event handler given the three following questions:

1. make a list of actions your user can make and the changes in the UI said actions make 

2. generally speaking, user actions are event handlers and the changes these actions make will be handled by state. Therefore, determine from your list which ones will be state and which one the event handler.  

3. group them together by state or event handler, remove duplicates, simplify

After these 3 steps, you should have figured out how many states you need and the event handlers as well for your component/app

Figuring out State Name & Data Type 

Now in section 2 of the state design process, we decide which data type the state should be and its name. A word of advice: avoid arrays and objects for state data types. Stick to primitives because those have less of a chance of being thrown off. 

4. Simplify the wireframe/mockup

    - remove unecessary text and components that are not related 

5. Simplify wireframe/mockup with text

    - replace the component with a text value that reflects its state, e.g. expanded, collapsed

6. repeat steps 4 - 5 with variation

7. plan out functions needed to do the text from step 5. Also think of the props you will need to send down and any other arguments 

Where are State and Events Defined

This is the final step. 

8. Given your planning, you should which states and events will be needed. Now it is time to decide where they should be defined in the component tree.

Remember to ask yourself, does X component need this state or handler? if no, define them higher up if a sibling needs it or within the sibling itself.

Practical Example

To give a practical example of this, and to narrow the scope, we are building the header for our web app. This header contains the nav menu which will be replaced by a burger icon in mobile. 

When a mobile user taps on this burger, a side drawer will slide in from the right hand side and display a mobile nav menu. This menu will have an X icon that will make the sidedrawer slide in back into the right upon being clicked. 

Your job is to implement this feature but first we will plan it out using this state design method. 

1. List user actions and changes they make while using app

    - Action: user clicks burger icon

    - Changes: backdrop overlays app, side drawer slides in from the right on top of backdrop, mobile nav menu appears

    - Action: user clicks on X icon or mobile nav link or backdrop

    - Changes: side drawer slides back in, backdrop disappears, app comes back into full view 

2. Is it state or event handler?

    - state: is the side drawer showing or not?

    - event handlers: burger icon click; X icon, backdrop, mobile nav link click 

3. Simplify

    - User has clicked on something 

    - The side drawer is either expanding or collapsing 

4. Remove unnecessary stuff from wireframe/mockup

    - remove logo, hero

    - just header bar with burger icon 

5. Simplify with text

    - for the sidedrawer, i replace with text collapsed or expanded 

6. repeat steps 4 - 5 

7. Plan out handlers, props and other arguments

    - handler for icon click, onClick will trigger setExpanded (boolean parameter)

    - state that the handler changes will go on the sidedrawer named as isExpanded

8. Plan out where the states and events will be defined in the component tree

    - header component that contains the burger, side drawer will house the state and pass the state down to the side drawer and the handler to the burger