Advices for transitioning from React Router V5 to V6
For my Flatiron React project, I wanted to use react router 6 after our cohort lead showed us how efficient some of its features are. This decision is probably the cruelest torment that I have inflicted upon myself in my short coding journey. I’ve never suffered as long or as hard I did in the past couple weeks because of this decision. To for anyone else that is planning to make the transition, I offer 3 advices.
Advice #1: Get comfortable with functional components and hooks before transiting from react router v5 to v6 . Hooks are special functions that lets functional component have same/similar functions as their class component counter part. React router 6 is heavily tied in with hooks, and unfortunately Hooks does not work inside classes/class component.
Advice #2: Know these 4 popular Hooks, < useState>,<useSelector>, <useDispatch >, <useEffect>,by heart. They will help you code more efficiently and make your code DRY. Since lifecycle methods and state are not available in functional component, these hooks’s functionality are similar/equivalent to some of the most popular life cycle method/state functions.
< useState>allows a functional component to have the same /similar functionality of state just like a class components. The useState hooks bundles state declaration, initial state, and setstate all into one line of code. In position one, you will name your own state variable. postion 2 will be your setstate method where you update your state. postion 3 is where you can declare your initial state.
<useSelector> and <useDispatch > ‘s functionality is similar to mapStateToProps and mapDispatchToProps. useSelector allows you to return data from the current state and store it as a variable while useDispatch returns a reference to the dispatch function.
Since Lifecyle method are available in functional component, <useEffect> can fulfill similar roles that is normally handled bycomponentDidMount, componentDidUpdate, and componentWillUnmount in the lifecycle method.
Advice #3: Treat <Outlet> and <useOutletContext> hooks as your new component container and component props. With react router 6, passing props to nested route/component is probably the trickiest part. You can no longer propagate props from one component to another component via router props. This can be extremely frustrating with nested components because it is highly likely that you will need to pass information from parent component to child component. The <Outlet> hooks not only allows you to set your parent component as the cover or frame for the following series of nested route’s , it will also allow you to pass data from your parent component to your child component via useOutletContext. As long as your declare your context within your parent component, you can pass your data to any of the children component just like how props are passed.
I only vaguely went over the concept of the above hooks, please refer to the official react documentation to tailor the code for you own use. Lastly, it seems like functional component will continue to play a major role in the future. Therefore, make sure to get familiar with functional component and break away from the tendency use class component for everything.
