A Week of React Learning: Key Takeaways and Future Plans
Tags: webdev, beginners, react, learning
Published: 2024-06-15 20:00:37


This week has been a fun week; it's my first week without any assignments for computer science and purely a week where I learned all sorts of React jazz. ✨

Not to mention, this week was the first week where I considered myself officially back on my **100Devs** community-taught journey. 

## This week I learned: 

This week, my focus was entirely on React. Here’s what I learned: 

### Fetching data in React

Having done Scrimba when I first started learning I knew something about fetching data within React, but, I could easily have failed to answer you, this week I fixed my tech debt knowledge about fetching data in a React application. 

To start with I got a refresher crash course on the **Fetch API**. It was something I knew and understood how to use, from a JavaScript point of view. The [**Fetch API**](https://developer.mozilla.org/en-US/docs/Web/API/fetch) not being part of the JavaScript language, but, is a Web API. Having absolutely nothing to do with the JavaScript specification, and only exists due to the environment in which we are running our code - **the browser** - which was a wonderful refresher. It is something I am wildly fascinated by. 

What I learned about fetching data in React is that the **[useEffect](https://react.dev/reference/react/useEffect)** hook is required to fetch data, this is because: 

- without a useEffect hook we can run into infinite loops, and I tested it, it can just keep running, which is not a good thing. 
- Fetching data from an external point is a *side-effect* - and React has no way of handling this asynchronous behaviour. However, with the useEffect hook, we can handle side-effects, this is the entire purpose of the **useEffect** hook in the first place. 


> useEffect
> `useEffect` is a React Hook that lets you [synchronize a component with an external system.](https://react.dev/learn/synchronizing-with-effects)

In the case of fetching data - you need to synchronise the data you have received with your application, also likely, as I have been doing in my tests, using the **useState** hook. 

I want to use this in my **RecipeFinder** project. :) 

## useReducer hook

I am still struggling with the useReducer hook, but the basics I have understood are: 

- it's like a super-powered useState
- using useReducer is best when the state is complex, eg. an object with various properties. 
- it takes two arguments, an initial state, just as useState does, and then a second, an action argument, this action argument is what gives useReducer its **super powered** juice, using this second argument we can update state more efficiently based on actions in our code, which would reduce complexity and errors. 

I still have to read and practice more with it. :) 

## Children in React

I had a crash course on JSX - JSX is just JavaScript under the hood. 

It is objects - and I learned that React transpiles its JSX to these objects and it has a hierarchy of children, which are a representation of the DOM nodes that are rendered to the UI. 

In doing this, I used Babel a lot. 

Look how cool it is, the React component and what it transpiles to.

```js
<MyComponent> 
  <div> 
    <h1> Hiya world! </h1>
    <h2> <span> oh a nested child </span> </h2>
  </div>
</MyComponent>
```

```jsx
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*#__PURE__*/ _jsx(MyComponent, {
  children: /*#__PURE__*/ _jsxs("div", {
    children: [
      /*#__PURE__*/ _jsx("h1", {
        children: " Hiya world! "
      }),
      /*#__PURE__*/ _jsxs("h2", {
        children: [
          " ",
          /*#__PURE__*/ _jsx("span", {
            children: "Oh a nested child "
          }),
          " "
        ]
      })
    ]
  })
});
```

Not to mention I also got a nice exploration on the React Children prop, which, despite being listed as something that increases the risk of fragile code, is something I find cool. 

Along with the Children prop, I learned the **Children.map** to transform Children in React, almost exactly how the **map** functions in vanilla JavaScript. 

I like the pattern. It allows for really nice dynamic manipulation of children elements. I haven't used it much outside of the study lesson though. :) Soon. TM. 
## Custom hooks

I recall seeing "Custom Hooks" in the title of a YouTube video once, I didn't know much about hooks then, all I knew then was useState and the idea of a custom hook horrified me. 

I was wrong. 

Custom hooks are freaking awesome. 

A custom hook is a module in React. It allows you to create a hook that performs a specific functionality all bundled up into a hook. This means you can share and use this hook anywhere in your code if you need it. 

Reducing code duplication. 

### Higher-order components and render props

I noticed something this week as I was learning React. 

A lot of React patterns/code revolve around reducing code duplication. Higher-order components and render props do exactly this. 

With Higher order components we have a component and then we return a new one from our higher order one and this new component has extra features. It's an interesting pattern I have to explore more, but the general idea is: 

When certain React logic is being reused a higher-order component might be a better option because it will reduce the code repetition, and then you can use that same higher-order component to implement similar logic in a different part of the application by returning a different component and modifying it to your use case. 

Render props function much the same way, however, instead, they return a render() method with the data of the new component/data. 

### Portfolio time... 

I also started a revamp of my portfolio. 

I have been using a template & that is cool and great, it's neat, and it's functional, and I likely will go back to one, but, I am making my own right now. I am using React. 

The goal is to implement a lot of the features and code I have learned. 

Learning about context API and how it can be used to toggle between themes was super exciting and I would like to make several for my portfolio. My fear is the design and probably this means I will hunt for a Figma design file and code it myself. 

This seems like a better idea to me. 

## Extras

A few extras I did this week: 

- I had a coffee chat with a front-end developer and it was pretty wonderful. I learned a lot from this person and got so many ideas, namely sharing my work and not learning in a vacuum, this is common advice and I have been working on that. 
- Their advice was to leverage LinkedIn as well, I am terrible at LinkedIn but, I will start to use it more. :) 

## Conclusion

Overall a wonderful week with React and I look forward to more, next week is Scrimba and I am super excited to dive into it and work on the projects. Will be super fun. 

This is just the beginning. I am truly super excited to continue this journey. 

More of my journey on ✨ [X/Twitter](https://x.com/km_fsdev) ✨