Experience on React project with hooks

I was building a small project with my friends on shopping cart scenarios.

Initially it was quite simple. Using create-react-app command the app got created. Later on, components design happened. Components were created using class syntax.

And for styling we used bootstrap4, but one of the collaborator wanted to try out material-UI and hence we included material UI and re-wrote all four components. Using material-UI was just copy paste in the beginning. Later on we made changes in material-UI APIs to adjust it to our requirements.

Now, the project has all components with class syntax and all the API calls are happening in App component. The props are getting passed to child components and actions from child components are moving back to App component and handling those actions inside App and changing the state and passing the updated props to children again.

As we added more components, handling action became more complex and components code were getting bigger and bigger.

This is the time that we decided to go with redux. But this time, we thought of including hooks also to save further refactoring. Using hooks was fun.

We created reducers, actions and used useState, useSelector, useEffect, useDispatch hooks.
The class components got converted to functional components.

After hooks, Component code looks smaller than before and it was declarative literally.
We had to use redux thunk as actions were synchronous and we had to make an API call as one of the action. Surprised to see 14 lines of redux thunk code though.

Now the project uses redux thunk and the concept of redux thunk was simple. It was dispatching promisified action.

The future goal is to include all react features in the project and understand the core concepts of react.