React Hooks: With Great Power Comes Greater Responsibilities

Caesar Bell
Oct 21, 2020 · 5 min read

While building a react-slack-clone from the Build a Slack Chat App with React, Redux, and Firebase course found in Udemy by Reed Barger, I found the perfect opportunity to vanquish React Hooks. This course was geared at using React 15 (a world before hooks 😃) along with learning how to use Google’s Firebase.

During the development of the project I learned the following;

  • The least efficient way of using hooks particularly useState
  • When to use useReducer *Spoiler Alert*: When the component’s state management has some complexities
  • The most efficient way of using useState
  • The ability to implement more than one useEffect for tracking different component state and props changes

The least efficient way of using hooks particularly useState

When following along with the course and building out Components, I would import useState as follows:

then I would set my initial state values (following very similar to how states would be set when using Class Components).

I would update the state based on events and React’s lifecycles (i.e when the Component would update).

Using …state is the ES6 way of copying the current state values and updating both the user and channel properties of the state. Below is another example of how I updated the state:

Here I followed the same process using ES6 spread syntax (i.e. …state) to copy the current state while updating the user's property with the new loadUsers array. As I followed along with the video, Reed Barger would implement the Class Components’ setState callback API as follows:

Due to using React Hooks and React’s Functional Components, I needed to find alternatives to React’s Class Component setState callback API since useState hooks have no callback API. An alternative is to invoke the function or setState function in useEffect ; this is where I began experiencing bugs when attempting to update the Component’s state.

To correct those odd behaviors (state properties not being updated correctly) I moved the Component’s state logic over to React’s useReducer instead. This allowed me to manage the Component state in a more manageable and stable way.

When to use useReducer

Once I removed the useState , imported useReducer and added the reducer function, I successfully created the state object with the initial state values. I was able to manage the component’s state and eliminate the inconsistency I was experiencing previously with my Component state updates.

A full example is illustrated below:

With React’s useReducer hook the state copying and side-effects occur within the reducer function, very similar to how you would update the state with Redux.

The most efficient way of using useState

With all good things, there needs to be some balance. useReducer can be overkill in some cases.

For some of the components, there were three states to manage, and with very little complexity, so IMO using useReducer would be too complex of a tool to use. Opting for useState was the way to go (by using it the most efficient way). This resulted in the implementation of three useState hooks; one for eachstate value.

Full example illustrated below:

By using three useState hooks I was able to manage each state-update independently from each other. This allowed the Component to update the state when needed and not having to worry about copying the current state’s value.

The ability to implement more than one useEffect for tracking different component state and props changes

For one of the most complex Components (i.e. Messages.jsx) I ended up implementing three useEffects hooks as followed;

The first useEffect was used to fire off the scrollToBottom method on every re-render. This allowed the page to scroll down to the latest messages received.

The second useEffect was used to fire off only if a channel was starred, or unstarred.

The third and final useEffect was to fire off listener functions and update the user and channel when there was a change in the following state: channel ,user, numUniqueUse, searchTerm, searchResults, isChannelStarred in conjunction with the removal of the listener function to stop any memory leaks. By using the different useEffect hooks within this app, I was able to manage which functions were fired off based on what state was updated and which lifecycle kicked off.

Conclusion

  • Differentiating the most and least efficient way of using useState can make a significant difference in your code
  • useReducer is a complex tool in managing a component’s state, therefore it is important to decipher when to use and when not to use
  • useEffect can be implemented more than once in a component to improve manageability

Resources

The Startup

Get smarter at building your thing. Join The Startup’s +786K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Caesar Bell

Written by

Husband, Father, Web Dev and many other things.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +786K followers.

Caesar Bell

Written by

Husband, Father, Web Dev and many other things.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +786K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store