How to use SCC patterns to build react components
Hi Developers, In this tutorial we will learn how to refactor React components and make them more maintainable and testable using SCC pattern.
I’m assuming you’re using Hooks inside component. Which makes things more complicated. Personally, I don’t like React hooks, especially useEffect . But you can’t get rid of it. Alternatively, you can create custom hooks using React hooks to avoid directly dealing with useEffect . For example, you can create useBeforeUpdate useAfterUpdate useAfterUpdateOnce useAfterUpdateWhen , those are for another blog. Today I’ll be focusing on refactoring the components using SCC pattern.
What is SCC pattern?
SCC stands for State, Controller and Component. It is most popular pattern used by Angular. Let’s see them one by one.
State
A state is place to store the data. As per SCC pattern rules, there can be only two types of State. One is component state which is private to your component. Other is shared(global) state, which can be shared by multiple components in your application.
For example,
- Logged-in user details
- UI library theme data
These should be shared state, so that multiple components can directly access them. You can either store them into React Context or can create custom store to store and update them.
Controller
A controller is a function which encapsulate all the logic and state to control the component. We will see controller in action in later part.
Component
A piece of code that build the actual UI. In this article I’m referring component to a React Functional Component.
Not only React, this SCC pattern you can apply to any UI library. Enough for the explanation, let see the code to refactor.
A Todo App
I know todo app is very small to be refactored. But this is a good starting point.
App component has a form element to with input field to add new todo and a list to display all the todos. The list also has a remove todo button.
You can see we are using two states todoList as Array of todos and todoName as String to store new todo name and it has 4 actions addTodo removeTodo toggleTodo changeTodoName
Now, we have analyse our component’s state and actions let’s refactor them using Controller
useController Hook
Let’s create a custom hook for the controller and save it in a file named App.controller.js You can use this naming convention to create specific controller for the component.
We have moved the state and actions inside this hook and we are returning only state and actions from this hook, because that is the rule.
Additionally we have added two more states doneTodo and undoneTodo which are derived from todoList state. You can see how we used useMemo hook to derived state.
Refactor Component
This useTodoController is returning only things state and actions . We have destructed them. But don’t destructed too much. Don’t destructed state and actions further.
TIP: Pass component props directly to useTodoController to use them inside your controller.
const App = (props) => {
const { state, actions } = useTodoController(props)
}Hope you enjoyed reading this blog. Smash the clap button if you like it and to keep me motivated to write more similar blogs.
