---
title: "DAY 3 OF 7: THE COGNITIVE LOAD IS HEAVY, BUT WE ARE FLYING"
url: https://daily.dev/posts/day-3-of-7-the-cognitive-load-is-heavy-but-we-are-flying-kyiuebuo3
source_url: https://daily.dev/posts/day-3-of-7-the-cognitive-load-is-heavy-but-we-are-flying-kyiuebuo3
type: freeform
source: "Feli Bertin Messi M eyi"
author: "Feli Bertin Messi M eyi"
published: 2026-05-21T00:16:27.921Z
updated: 2026-05-21T00:17:13.668Z
reading_time: 2
upvotes: 0
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# DAY 3 OF 7: THE COGNITIVE LOAD IS HEAVY, BUT WE ARE FLYING

**[Feli Bertin Messi M eyi](https://daily.dev/sources/kwxdluddj4js6cpazjwli)** · [@bertin066](https://daily.dev/bertin066) · 2 min read · 0 upvotes · 0 comments

## Summary

A developer's Day 3 journal from a 7-day coding challenge covering JavaScript data structures (arrays, objects, destructuring) and React fundamentals including list rendering with .map(), the key prop, controlled inputs, and lifting state up. The post documents learning progress and invites community discussion on state management strategies.

## Content

**12 hours deep. 3 days down. No backing down.**

Today was the tipping point. I spent my **4-hour deep work block** diving into complex data structures and learning how to make React components actually talk to each other. The training wheels are officially off.

Here is the absolute payload of data architecture and state management I crushed on Day 3:

### JAVASCRIPT: DATA STRUCTURES & DESTRUCTURING

- **Array Mechanics:** Manipulated lists using `push`/`pop`, sliced data with `slice`/`splice`, and tracked values with `includes` and `indexOf`.
- **Smarter Iteration:** Ditched classic counters for modern `for...of` loops and `.forEach()` array methods.
- **Object Architecture:** Mastered key-value pairs and learned exactly when to use **dot notation** vs. dynamic **bracket access** (`user[variable]`).
- **Destructuring:** Cleaned up my code by unpacking arrays and objects into distinct variables on the fly.

## **REACT.JS: DYNAMIC LISTS & DATA PIPELINES**

- **The **`.map()`** Machine:** Transformed raw JS arrays into arrays of JSX components seamlessly.
- **The **`key`** Prop:** Figured out why React screams at you if you don't give list items a unique `key` identifier for DOM reconciliation.
- **Controlled Inputs:** Wired form fields directly into React state so that every single keystroke is captured and controlled.
- **Lifting State Up:** Conquered the trickiest part of the day—moving state to a common parent component so sibling components can stay perfectly in sync.

### 

**💬 QUICK QUESTION FOR THE FRONTEND WIZARDS:** "Lifting state up" trips up almost every beginner. What is your favorite way to manage state when components start getting messy? Do you lift it, or do you have a better strategy? Drop your wisdom below! 👇

#WebDevelopment #JavaScript #ReactJS #CodingChallenge #BuildInPublic #Day3 #FrontEndDeveloper

---

[View this post on daily.dev](https://daily.dev/posts/day-3-of-7-the-cognitive-load-is-heavy-but-we-are-flying-kyiuebuo3)