Section 05 - Manage Leaflet State in a React App with Hooks
React Leaflet is an awesome library that gives us components allowing us to easily add a Leaflet map to our React apps. However, once you start working with complex solutions, you'll come to notice that sometimes managing state between React and a Leaflet map can bite you if you're not careful.
How can we best manage state between all aspects of our map to take advantage of all features of both React and Leaflet?
Colby Fayock: [0:00] Hey, mappers. Welcome to lesson five. This is the first lesson of lesson group two. With our foundation in place, we're going to learn how to manage state. This can be challenging between Leaflet and React because they both have their internal state.
[0:11] For our first exercise, we're going to learn how to add a ref to our map. Our react-leaflet components work by utilizing the Leaflet API. When that happens, they store the internal map instance that we can access with a ref. This means by using a ref, we can indirectly access the Leaflet API.
[0:25] For our first exercise, we'll add a ref to our map to prepare to use later. Next, for exercise two, since we already have our ref setup, we'll set up a useEffect hook that we'll use to access the ref for our map. The useEffect hook fires after the component renders.
[0:38] When using a ref, we want to make sure we use it after the components rendered. If we try to use it during the render, it could potentially not be the most recent version. This is particularly true on first render where your ref wouldn't be available at all.
[0:49] We'll be able to test this out by logging out our ref value inside our useEffect hook. We're now able to directly access our Leaflet instance and use the map API.
[0:57] In exercise three, we're going to recreate all those markers we created in the first lesson group. To do that, we're going to use Leaflet's marker instance. We'll first create a new marker instance similar to how we created a marker component. Then we'll apply that marker to our active map using the ref we just accessed in exercise two.
[1:13] For exercise four, we're going to take what we just learned and see how it can go wrong. I mentioned before that dealing with state between React and Leaflet can get messy. Because of this, it's probably worth understanding how this can happen.
[1:23] We'll review a quick example I set up that shows how state between Leaflet and React can get out of sync. Though you can try to reproduce it locally, you want to make sure those changes don't get saved. The goal will be to learn about how we can avoid these pitfalls.
[1:35] Finally, you already recreated one of your markers. Now for some extra credit, we're going to recreate that second marker you created in lesson four. To do this, we'll use the same method we use an exercise three.
[1:45] In this lesson, we'll start digging into the fundamentals that make complex maps. Data is what makes maps impactful, so we're learning how you can reliably apply that data to your map. Have fun with this lesson, and good luck.