Unlocking React Router and Redux with Advanced Hooks: A Developer’s Handbook

React

Introduction

In modern application development with React, managing state and handling routing are crucial aspects of building robust applications. Redux provides a centralised state management solution, while React router DOM provides navigation and routing within a React application. Both Redux and React Router DOM offer a variety of hooks that simplify common tasks and enhance developer productivity.

In this blog post, we’ll explore a collection of essential hooks provided by Redux and React Router DOM, discussing their functionality, use cases, and examples. These hooks are something that developers need in their daily coding practices and it maintains code sanity and accessibility easier.

So, let’s dive in and discover how to get the power of hooks for Redux and React Router DOM!

1. useParams()

• This hook is used to access parameters from the current route in react router. This is very useful as you can access the params easily from anywhere in the component.
• It returns an object of key-value pairs parsed from the URL.
• It avoids passing the props from multiple components (if the props are present in the params).
• Pitfall: Forgetting to update components when route parameters change.
• If the component relies on route parameters obtained through useParams, it won’t automatically re-render when the route parameters change unless you explicitly handle it.
• Solution: Use the useEffect hook to trigger re-renders when route parameters change.

import { useParams } from 'react-router-dom';

function UserProfile() {
  let { username } = useParams();

  return <h1>User Profile: {username}</h1>;
}

In the above code, username will be the key passed in the url. {username} will give the value of the key.

2. useLocation()

• This hook gives access to the current URL location.
• It returns a location object with properties like pathname, search, hash, etc.
• With the help of this hook, we can pass state through URL from one component to another.
• Pitfall: Relying solely on location.pathname for navigation.
• Using location.pathname alone might not be sufficient for complex navigation scenarios, especially when dealing with query parameters or hash fragments.
• Solution: Consider using other properties of the location object like search and hash when necessary.

import { useLocation } from 'react-router-dom';

function Navigation() {
  let location = useLocation();

  return <div>Current Path: {location.pathname}</div>;
}

Here, location.pathname will get the value of the current path from the url.

3. useNavigation()

• useNavigate hook is used for programmatic navigation in react router v6.
• It returns a navigate function to navigate to different routes.
• Pitfall: Misusing navigate function with relative paths.
• The navigate function doesn’t inherently support relative paths like ‘../home’. It expects an absolute path or a string representing the route name.
• Solution: Construct absolute paths dynamically based on the current location.

import { useNavigate } from 'react-router-dom';

function NavigateButton() {
  let navigate = useNavigate();

  return <button onClick={() => navigate('/home')}>Go Home</button>;
}

In this code, by clicking on the button, the page will navigate to home page. This is helpful in navigating to different routes in the application.

4. useDispatch()

• This hook is typically used with redux for dispatching actions.
• It returns the dispatch function from the redux store.
• Pitfall: Overusing useDispatch in presentational components.
• Connecting every component to the redux store using useDispatch can lead to tightly coupled components and reduce reusability.
• Solution: Follow best practices like using container components for redux logic and keeping presentational components unaware of redux.

import { useDispatch } from 'react-redux';
import { getData } from './actions';

function Counter() {
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch(getData())}>
      Get data from redux
    </button>
  );
}

In this code, we initiate an action with the help of dispatch.

5. useSelector()

• useSelector is another redux hook used for selecting data from the redux store.
• It returns the selected data from the redux store state.
• We store the data in redux store, this hook helps in fetching the data from the redux store and using it at multiple places as required.
• Pitfall: Over-selecting unnecessary data from the redux store.
• Selecting large amounts of data from the redux store can lead to performance issues and unnecessary re-renders.
• Solution: Select only the data required by the component, and use memoization techniques like reselect for optimising selectors.

import { useSelector } from 'react-redux';

function DisplayCounter() {
  const counter = useSelector(state => state.counter.getCounter);

  return <div>Counter: {counter}</div>;
}

Here, the value of counter is store in getCounter variable inside the redux store. We can access that value and use it in our component.

Conclusion

In this journey through React hooks for Redux and React Router DOM, we’ve uncovered a lot of tools that can significantly enhance your development experience. From effortlessly accessing route parameters with useParams to easily dispatching actions with useDispatch, each hook serves a specific purpose in simplifying common tasks and improving code readability.

However, as with any powerful tool, it’s essential to understand these hooks and be mindful of potential pitfalls. Whether it’s ensuring components re-render appropriately when route parameters change or optimising selectors to avoid unnecessary re-renders, being aware of these can save you from a headache!!

Happy coding!