This week we learned about side effects in React. Essentially, side effects are anything that affects something that is outside of the scope of the function that's being executed. So things like API requests, manually manipulating the DOM, timers, etc. Side effects could cause a component to return something different for the same props and state. Thankfully, React has tools to take care of that so that we can control what our components are returning. .useEffect(), or the effect hook, tells React when to run the side effect contained in its scope. The effect hook takes 2 parameters: a callback function and a dependency array. The dependency array determines when the callback function is executed. For example, if you had a counter piece of state and the callback function that logs counter, you would only want it to run when counter is changed. By passing in counter to the dependency array, the callback function inside of the effect hook will only run, and thus rerender to the screen, when counter is changed. You can also opt to leave the dependency array empty, which only runs the callback function once after the initial render. The effect hook is very powerful because it allows for you to control which parts of your site get rerendered on state changes. It provides a better user experience because now only certain parts of the site need to rerender instead of the entire page when you change certain pieces of state.

For our project to practice using the effect hook, we had to implement the effect hook do request data from the NASA Photo of the Day API. While I am not thrilled about the design I came up with (aside from the lack of responsiveness), I was also able to implement a basic pagination that allows you to click "Next" or "Previous" to see other days' photos. Check out the project here or the GitHub repo here!

Our second class this week was about advanced styling techniques in React. Basically, how we can style a React site or app besides vanilla CSS or CSS preprocessors. We talked about Reactstrap, which is like a React version of Bootstrap, and Styled Components. I had used Styled Components before the first time I tried making my personal site with Gatsby. This time around I used Emotion, but syntactically the basic functions of Emotion and Styled Components are pretty much the same. I wasn't a huge fan of Reactstrap, but I do see its value when you just want to get something up and running without having to spend all the time creating a lot of custom components. So I opted for Styled Components for refactoring the styling of the NASA project, but I'm really excited to dig into Theme UI on my own.

This weekend we had our Sprint Challenge for this Intro to React unit. Our task was to request data from a Star Wars API and display some information about different characters. I found myself definitely overthinking a lot of things, so it took me a bit longer than I hoped. But at the same time, I did find myself having an easier time figuring out where to set state and pass my props. I think doing a lot of practice has really been helping, so I'll definitely be doing some more practice on my own time to solidify things even more.