# WEEK 2 OF MY SOFTWARE JOURNEY AT BLOCKFUSE LABS

Introduction
Still on react learning step by step day by day these week i learnt about the react hooks useEffect
## useEffect
is a react hook that lets you synchronize a component with an external system. it is a react hook that tells react to do something when the component mount/renders.
#### uses of useEffect
* event listerner
* dom manipulation
* fetch data from api
* real time subscription/updates
* clean up when component unmount

examples of useEffect.

1. `useEffect(() =>{} )` these runs when components mount or renders.
2. `useEffect(() => {}, [])` runs only also when components render (dependency array)
3. `useEffect(() => {}, [value])` these would only run when the value change.

## UseContext
useContext is a React hook that allows components to share data without having to pass props manually at every level (called prop drilling).

## Usememo
is a react hook that let's you cache the result of a calculation between re-renders.

## Usereducer
is a react hook that lets you add a reducer to your components.

## ReactQueryHook
is more modular wherer you have your hook in a seperate place and you apicalls in a seperate place and also your apiendpoints in a seperate place too.

# WEEK 3 OF MY SOFTWARE JOURNEY AT BLOCKFUSE LABS

My week 3 of software journey these week i learned
### REACTS LIST AND KEYS.

firsty a key is used to map an item, when you have a key you can used it to tag and item.

these week i learnt about how to use the list, keys and mapping to use in a list e.g

<li>Mango</li>
<li>Apple</li>
<li>Orange</li>
<li>Peer</li>
<li>Guava</li>
<li>WaterMelon</li>
<li>Bananan</li>
<li>Grapes</li>

instead of writing these like these image how many lines of code and if any adjustment you have to add them again instead of doing these lets see a better way to go about it

const fruits = [ 
    "Mango", "Apple", "Orange",
    "Peer", "Guava", "WaterMelon", "Bananan",
    "Grapes"
];

<ul>
  {fruits.map((fruit, index) => (
    <li key={index}>{fruit}</li>
  ))}
</ul>

why we use the key={index} is that Keys help React identify which items changed, are added, or removed, but in this case, index is okay because the list is static and won’t change what i mean is that we have added so we dont want to add again so the list is static we wont add any other thing.

looking at these we first have an array of string that we store each of our items in a string and we have the map method the .map() loops over each item in the fruits array and for every fruit, it returns/displays them in a `<li>` list element with the fruit's name and it also gives each `<li>` a unique key using the index
examples:

fruit = "Mango" → becomes <li key={0}>Mango</li>

fruit = "Apple" → becomes <li key={1}>Apple</li>

and so on didnt do much these just hands on project practice and also here is a movie website i built that renders the movies using an api and using the key and map method explained above you can use it to study more and if you want the code for that just comment or message me i would provide you with the code here is the link to the live host
https://movie-streaming-bay.vercel.app/

CONCLUSION
in the programming ecosystem it is okay to encounter issues i encounter and issue using tailwind4 for my styling and responsiveness but all thanks to my mate who help me throught it i can know use the tailwind4 it is okay to have issues it is part of the learning process see you guy next week.