How to approach React tasks, two mindsets.

Split your task in two: State Management and State Rendering.

Llorenç Muntaner
Jun 6 · 4 min read

You should split the task in at least these two pieces: State Management and State Rendering.

My playing with Google Drawings :)

You can think of it as different hats to use when solving a task. I am either on State Management mode or State Rendering mode.

State Management

One of the splits is State Management. I don’t mean only React State. I apply this same approach when talking about Redux State.

During this part I only think about updating the state. Most of the time you need to wait for some event to perform the update.

An event could be an onClick, fetching from an API, …

At this point think ONLY in terms of state. How do I want the state to look like after the event has triggered? What do I need to do to accomplish that? Which actions do I need? What should the reducer do?

I don’t think about how this will look in the UI yet. ONLY STATE.

I check the output either with tools like Redux Dev Tools or printing the state or props.

Focus on handling the event and updating the state.

State Rendering

Now it’s time for some React magic. How should the UI be with that state? Do we want to add a tick mark? Change color?

Here is were I focus on all the UI related tasks. The good point here is that I assume that the state works properly. I don’t deal with events or state updates.

Most of the tasks in this mindset are done with JSX. In the render method you can render one component or the other depending on the state or props of that component. Maybe you create new functional components.

Focus on rendering the UI for that state.

Which mode should go first?

The mode in which you start does not matter. Some tasks are more suited to start with State Management and others with State Rendering.

If I start with State Rendering I might hardcode the state I want and make sure it renders correctly. Then I move to State Management mode and try to handle the event and update the state.

Todo App

Let’s take a look at this approach with an example.

Image from http://todomvc.com/

User story: allow users to set tasks as completed when clicking on the circle icon on the left side.

State Management

Assume that this is our current state in Redux:

{
1: {
id: 1,
content: 'redesign website',
},
2: {
id: 2,
content: 'do some nerdy stuff',
}
}

How should the state be after clicking on the circle?

How about adding a new property called completed in the todo object? This could be false initially and then true after clicking.

This means that the state needs to go from:

{
1: {
id: 1,
content: 'redesign website',
completed: false,
},
2: {
id: 2,
content: 'do some nerdy stuff',
completed: false,
}
}

To:

{
1: {
id: 1,
content: 'redesign website',
completed: false,
},
2: {
id: 2,
content: 'do some nerdy stuff',
completed: true, // assume we click on this one
}
}

Once we know what we have to do, we set to do it. Do not think yet about how will this affects the UI.

Your task during this mindset is to accomplish that state update.

You can install Redux Dev Tools to check whether you have accomplish it or just console.log the todo list when you render it.

State Rendering

This part is more pleasant. You will see your changes in the page.

In this part, you assume (because you just did it) that the state will change accordingly and focus on adapting the JSX to the new state.

You could create a new css class and add it when the completed property is true.

<li className={ todo.completed ? 'completed' : 'not-completed' }>
{ todo.content }
</li>

This is an oversimplified example, but enough to get the gist of it.

In a real life application, you might need to change multiple components and maybe create new ones during this mode.

Do not forget to make sure that your app renders properly with all the possible states.

Conclusion

Developing is hard. Solving problems and approaching a task can sometimes be overwhelming. Specially for beginners. By splitting down your task into smaller ones you reduce the cognitive load and make it more approachable.

Splitting down the React tasks with these two different mindsets has helped me a lot. I hope that it will also help you.

Feel free to jump on the comments and share your patterns or tricks to split tasks into smaller ones. I would love to hear about more approaches.

Thanks for reading!

JavaScript in Plain English

Learn the web's most important programming language.

Thanks to Tià.

Llorenç Muntaner

Written by

Javascript Instructor. New course at introtoweb.dev

JavaScript in Plain English

Learn the web's most important programming language.