DEV Community: OGBONNA SUNDAY

I Patched CSS Grid into React Native — Here's What Broke (and What Finally Worked)

OGBONNA SUNDAY — Thu, 18 Dec 2025 09:13:42 +0000

TL;DR: I got CSS Grid working natively in React Native by applying an experimental patch to Yoga (the layout engine). Here's what I learned, the challenges I faced, and how you can try it yourself.

The Problem: Flexbox Isn't Always Enough

If you've built complex layouts in React Native, you should already know the pain and hassel involved in it. If you want a dashboard with cards that span multiple rows and columns, just prepare yourself for the battle of deeply nested View components, manual row management, and a lot of flex: 1 ratios.

Here's what a "simple" grid layout looks like with traditional Flexbox:

// 😩 Flexbox: Nested Views, manual rows.
<View style={{ gap: 8 }}>
  <View style={{ flexDirection: 'row', gap: 8 }}>
    <View style={{ flex: 2 }}>Spans 2 cols</View>
    <View style={{ flex: 1 }}>Item 1</View>
  </View>
  <View style={{ flexDirection: 'row', gap: 8 }}>
    <View style={{ flex: 2, gap: 8 }}>
      <View style={{ flexDirection: 'row', gap: 8 }}>
        <View style={{ flex: 1 }}>Item 2</View>
        <View style={{ flex: 1 }}>Item 3</View>
      </View>
      {/* More nesting for row-spanning... */}
    </View>
    <View style={{ flex: 1 }}>Spans 2 rows</View>
  </View>
</View>

Now imagine doing this for a real dashboard with 10+ widgets. It's a nightmare to maintain.

The Dream: Native CSS Grid

What if we could just write this instead?

// ✨ CSS Grid: Flat structure, declarative placement
<View style={{
  display: 'grid',
  gridTemplateColumns: ['1fr', '1fr', '1fr'],
  gap: 8,
}}>
  <View style={{ gridColumnStart: 1, gridColumnEnd: 3 }}>Spans 2 cols</View>
  <View>Item 1</View>
  <View>Item 2</View>
  <View>Item 3</View>
  <View style={{ gridRowStart: 2, gridRowEnd: 4 }}>Spans 2 rows</View>
</View>

No nesting. No manual row management. Items automatically flow into the grid. Row and column spanning is trivial.

This is now possible, thanks to an experimental patch from @intergalacticspacehighway that adds CSS Grid support directly to Yoga, React Native's layout engine.

What I Built

I created a demo project to test and showcase this patch. It includes:

A CSS Grid example screen demonstrating dashboards, 3-column grids, spanning items, and fractional units
A Flexbox comparison screen showing the same layouts with traditional approaches
Working builds on iOS and Android — this is native grid layout, not a web view hack

Tech Stack

Package	Version
Expo SDK	55 (Canary)
React Native	0.83.0-rc.5
React	19.2.0

Yes, I'm living on the bleeding edge here. I chose to use React Native 0.83.0-rc.5 and Expo SDK 55 canary builds to try out the latest features alongside the grid patch.

How the Patch Works

The patch modifies React Native at multiple layers:

1. Yoga Layout Engine (The Core)

Yoga is the C++ layout engine that powers React Native's UI. The patch adds:

New grid algorithm files: GridLayout.cpp, AutoPlacement.h, TrackSizing.h
Grid track types: Support for fr units, auto, percentages, and fixed values
Grid line positioning: gridColumnStart, gridColumnEnd, gridRowStart, gridRowEnd
A new display type: YGDisplayGrid alongside YGDisplayFlex and YGDisplayNone

Here's a snippet from the patch showing the new grid track list parsing:

// Grid Track List conversion - parses CSS grid track syntax
if (trackStr.size() > 2 && trackStr.substr(trackStr.size() - 2) == "fr") {
  // Flex (fr) unit
  float fr = std::stof(trackStr.substr(0, trackStr.size() - 2));
  trackSize.minSizingFunction = yoga::StyleSizeLength::ofAuto();
  trackSize.maxSizingFunction = yoga::StyleSizeLength::stretch(fr);
}

2. React Native StyleSheet Types

The patch extends TypeScript/Flow types to include grid properties:

display?: 'none' | 'flex' | 'contents' | 'grid' | undefined;

gridTemplateColumns?: ReadonlyArray<number | string | {min: number | string; max: number | string}> | undefined;
gridTemplateRows?: ReadonlyArray<number | string | {min: number | string; max: number | string}> | undefined;

gridColumnStart?: number | 'auto' | `span ${number}` | undefined;
gridColumnEnd?: number | 'auto' | `span ${number}` | undefined;
gridRowStart?: number | 'auto' | `span ${number}` | undefined;
gridRowEnd?: number | 'auto' | `span ${number}` | undefined;

3. Native Renderers (iOS & Android)

Both platforms needed updates to recognize the new grid display type and pass grid styles through to Yoga.

Supported Grid Properties

Container Properties

Property	Example	Description
`display`	`'grid'`	Enables grid layout
`gridTemplateColumns`	`['1fr', '1fr', '1fr']`	Defines column tracks
`gridTemplateRows`	`['auto', 100, '1fr']`	Defines row tracks
`gap`	`16`	Gap between grid items (same as flexbox)

Item Properties

Property	Example	Description
`gridColumnStart`	`1`	Column line to start at
`gridColumnEnd`	`3`	Column line to end at
`gridRowStart`	`1`	Row line to start at
`gridRowEnd`	`4`	Row line to end at

Track Size Values

Numbers: Fixed pixels (e.g., 100)
'auto': Size based on content
'Xfr': Fractional units (e.g., '1fr', '2fr')
'X%': Percentage of container

Challenges I Faced

1. Manually Applying the Patch (The Hard Way)

Before I got the patch working, I tried manually applying all the changes by hand. I spent over 3 hours copying code, editing files, and cross-referencing the patch diff — only to hit build errors after everything was done.

Frustrated, I turned to AI agents for help. I went in circles with Claude Opus 4.5 and GPT 5.2, but they struggled to accurately make the changes across so many files. They'd run out of context window mid-task, lose track of what had been changed, and end up breaking things.

Thankfully, Gemini 3 Pro took a smarter approach: it downloaded the relevant code to a temporary file where it could reference the full context and make all the changes systematically. It worked on the first try. Sometimes the right tool makes all the difference.

2. TypeScript Type Conflicts

Expo's react-native-web type definitions already include web-only grid properties (as strings). These conflicted with the new native grid types (which use arrays). I had to create a second patch to comment out the conflicting web types:

-    gridTemplateColumns?: string;
+//     gridTemplateColumns?: string;

This was a quick hack. A proper solution would involve conditional types or platform-specific type overrides.

3. Building from Source

Because the patch modifies native C++ code in Yoga, React Native must be built from source. This means:

// app.json
{
  "expo": {
    "plugins": [
      ["expo-build-properties", {
        "ios": { "buildReactNativeFromSource": true },
        "android": { "buildReactNativeFromSource": true }
      }]
    ]
  }
}

Initial builds take significantly longer (10-15 minutes on my M1 MacBook). Subsequent builds are faster thanks to caching, but it's still a notable overhead.

4. Patch Application Strategy

I initially tried using patch-package, but ran into issues with the patch format and postinstall timing. I ended up using a simple postinstall script with the Unix patch command:

{
  "postinstall": "patch -p1 < patches/react-native+0.83.0-rc.5.patch && patch -p1 < patches/expo+55.0.0-canary-20251212-acb11f2.patch"
}

5. Debugging Grid Layouts

When things didn't work, debugging was challenging. The patch includes some printf statements for debugging track parsing:

printf("[GRID CONV] fromRawValue for GridTrackList called\n");
printf("[GRID CONV] tracks.size() = %zu\n", tracks.size());

These helped me verify that style values were being parsed correctly, but I had to rebuild native code each time I wanted to add more logging.

What Works (and What Doesn't)

✅ Working

Basic grid layouts with gridTemplateColumns and gridTemplateRows
Fractional units (1fr, 2fr)
Fixed pixel values and percentages
auto sizing
Grid item placement with gridColumnStart/End and gridRowStart/End
Gap between items
Auto-placement of items into the grid
iOS and Android support

⚠️ Not Tested / Potentially Missing

grid-template-areas (named grid areas)
grid-auto-flow (row vs column placement direction)
minmax() function (partial support exists in the patch)
Subgrids
Dense packing

Code Examples

Dashboard Layout

<View style={{
  display: 'grid',
  gridTemplateColumns: ['1fr', '1fr'],
  gap: 16,
}}>
  {/* Header - spans full width */}
  <View style={{ gridColumnStart: 1, gridColumnEnd: 3 }}>
    <Text>Dashboard Header</Text>
  </View>

  {/* Stats cards - auto-placed into grid */}
  <View><Text>Revenue: $12,875</Text></View>
  <View><Text>Users: 8,420</Text></View>

  {/* Chart - back to full width */}
  <View style={{ gridColumnStart: 1, gridColumnEnd: 3 }}>
    <Text>Activity Chart</Text>
  </View>
</View>

Mixed Spanning

<View style={{
  display: 'grid',
  gridTemplateColumns: ['1fr', '1fr', '1fr'],
  gap: 8,
}}>
  <View style={{ gridColumnStart: 1, gridColumnEnd: 3 }}>
    Spans 2 columns
  </View>
  <View>1</View>
  <View>2</View>
  <View>3</View>
  <View style={{ gridRowStart: 2, gridRowEnd: 4, gridColumnStart: 3 }}>
    Spans 2 rows
  </View>
  <View>4</View>
  <View>5</View>
</View>

Try It Yourself

Prerequisites

Node.js 18+
pnpm
Xcode (for iOS)
Android Studio (for Android)

Setup

git clone https://github.com/OgDev-01/react-native-css-grid-patch
cd react-native-css-grid-patch

# Install dependencies (patches applied automatically)
pnpm install

# Generate native projects
pnpm run prebuild

# Run on iOS
pnpm run ios

# Run on Android
pnpm run android

The Future of Grid in React Native

This patch is experimental and not officially supported. However, it demonstrates that CSS Grid in React Native is technically feasible.

The fact that Yoga can be extended to support grid layout opens up exciting possibilities. If the community shows enough interest, we might see official grid support in a future React Native release.

"For now, if you're willing to live on the edge and apply an experimental patch, you can start using CSS Grid in your React Native apps today.

Credits

@intergalacticspacehighway for creating the CSS Grid patch
The Yoga team for building an extensible layout engine
The Expo team for making it relatively easy to build RN from source

Resources

Have you tried the CSS Grid patch? I'd love to hear about your experience. Find me on Twitter/X at https://x.com/OgDev_01 or open an issue on the repo!

Level Up Your JS: Object Literal Enhancements That Will Change Your Code

OGBONNA SUNDAY — Tue, 08 Oct 2024 10:26:49 +0000

Object literals are a fundamental part of JavaScript, allowing us to create and initialize objects quickly. With ES6 and beyond, JavaScript introduced several enhancements to object literals, making them even more powerful and concise. Let's dive into these improvements and see how they can make our code cleaner and more efficient.

1. Shorthand Property Names

When creating an object, if the property name is the same as the variable name you're assigning to it, you can use a shorthand syntax.

const name = 'John';
const age = 30;

// Old way
const person = {
    name: name,
    age: age
};

// New way
const person = { name, age };

console.log(person); // { name: 'John', age: 30 }

This shorthand syntax reduces repetition and makes our code more concise.
MDN Documentation: Object initializer

2. Shorthand Method Names

Similarly, when defining methods in an object, we can omit the function keyword and the colon.

// Old way
const calculator = {
    add: function(a, b) {
        return a + b;
    }
};

// New way
const calculator = {
    add(a, b) {
        return a + b;
    }
};

console.log(calculator.add(5, 3)); // 8

This syntax is cleaner and easier to read, especially when you have multiple methods in an object.
MDN Documentation: Method definitions

3. Computed Property Names

ES6 allows us to use expressions to compute property names. This is particularly useful when you want to create dynamic property names.

const prefix = 'user_';
const id = 1234;

const user = {
    [`${prefix}${id}`]: 'John Doe'
};

console.log(user.user_1234); // 'John Doe'

This feature is powerful when you need to create objects with dynamic keys based on some logic or external data.
MDN Documentation: Computed property names

4. Method Properties

ES6 introduced a new way to define methods in object literals using the get and set keywords. This allows you to create computed properties without explicitly calling a function.

const person = {
    firstName: 'John',
    lastName: 'Doe',
    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
    set fullName(name) {
        [this.firstName, this.lastName] = name.split(' ');
    }
};

console.log(person.fullName); // 'John Doe'
person.fullName = 'Jane Smith';
console.log(person.firstName); // 'Jane'
console.log(person.lastName); // 'Smith'

Getters and setters provide a clean way to define computed properties and can be used to add validation or side effects when getting or setting values.
MDN Documentation: Getter and Setter

5. Object Spread Operator

While not strictly part of object literal enhancement, the spread operator (...) is a powerful feature that works well with object literals. It allows you to easily clone objects or merge multiple objects.

const defaults = {
    theme: 'light',
    fontSize: 14
};

const userPreferences = {
    fontSize: 16
};

const settings = {
    ...defaults,
    ...userPreferences
};

console.log(settings); // { theme: 'light', fontSize: 16 }

The spread operator makes it easy to create new objects based on existing ones, which is particularly useful for maintaining immutability in your applications.
MDN Documentation: Spread syntax (...)

Conclusion

These object literal enhancements in JavaScript provide developers with more expressive and concise ways to work with objects. By leveraging these features, you can write cleaner, more readable code that's easier to maintain.

Remember, while these features are powerful, it's important to use them judiciously. Always prioritize code readability and maintainability over brevity.

Browser Compatibility

Here's a quick overview of browser support for these features:

Feature	Chrome	Firefox	Safari	Edge
Shorthand Properties	43+	33+	9+	12+
Shorthand Methods	43+	34+	9+	12+
Computed Property Names	43+	34+	8+	12+
Getter/Setter Methods	1+	1.5+	3+	12+
Object Spread	60+	55+	11.1+	79+

Practical Use Cases

Shorthand Properties: Great for creating objects from existing variables, especially in React component props.
Shorthand Methods: Useful in class-like structures or when defining multiple related functions.
Computed Property Names: Ideal for creating dynamic keys in internationalization (i18n) objects.
Getter/Setter Methods: Perfect for creating "smart" properties with built-in validation or side effects.
Object Spread: Excellent for state management in Redux or for creating new objects with slight modifications.

Performance Considerations

While these enhancements generally don't have significant performance implications, the object spread operator can be less efficient than Object.assign() for merging many properties. For most use cases, the readability benefit outweighs any minor performance differences.

Related Features

To further enhance your understanding of modern JavaScript object manipulation, consider exploring:

Destructuring assignment
Object.assign() method
Object.entries(), Object.values(), and Object.keys() methods
The Object.freeze() and Object.seal() methods for object immutability

By mastering these object literal enhancements and related features, you'll be well-equipped to write more elegant and efficient JavaScript code.

If you find this article helpful, then click on the follow button to get more updates and helpful resources on JavaScript, Reactjs, and Next.js. You can also follow me on Twitter @OgDev-01 to get useful resources and tech trends or on OpenSauced to see what contributions I've been making and the ones I highlight!

Understanding getStaticProps in Next.js

OGBONNA SUNDAY — Fri, 07 Jul 2023 11:03:38 +0000

Before I dive into the topic for today getStaticProps, Let me do a brief intro to what Next.js is:

As seen in the image above from Next.js official webpage, Next.js is known to be the React framework for Production.

One of the main benefits of using Next.js is that it makes it easy to build server-rendered applications, which means that the content of the webpage is generated on the server and sent to the client, rather than being generated entirely in the browser using client-side JavaScript. This can improve the performance of your application, especially for users on slow connections or devices.

Next.js also makes it easy to build statically generated applications, which means the content of the webpage is generated at build time, rather than being generated on-the-fly when the page is requested. This can be useful for websites that don't require dynamic content, or for pages that only need to be updated infrequently.

getStaticProps

getStaticProps is a function in Next.js that allows you to retrieve data at build time, the data is fetched and pre-rendered at build time, rather than being fetched on the client side after the page has been loaded in the browser.

Here's an example of how getStaticProps might be used in a Next.js application:

export async function getStaticProps() { 
   const res = await fetch('https://api.example.com/products');
   const products = await res.json();

   return { props: { products } }; 
} 

export default function ProductsPage({ products }) { 
return ( 
   <div> 
     {products.map((product) => (
        <div key={product.id}>{product.name}</div> 
      ))}
   </div> 
); }

In this example, the getStaticProps function is fetching a list of products from an API at build time. The data that is returned from the function is then passed to the ProductsPage component as a prop, which is used to render the list of products on the page.

Note:

getStaticProps in Next.js 12 and below versions only work in the pages route files exports and cannot be used in a component scope.

Benefits:

There are several benefits to using getStaticProps in a Next.js application:

Improved performance: getStaticProps allows you to pre-fetch and pre-render data at build time, which can improve the performance of your application. This is because the data is already available when the page is first loaded in the browser, rather than having to wait for an additional network request to fetch the data.
Better SEO: Server-rendered applications can be easier for search engines to crawl and index, as the HTML is generated on the server rather than being generated by JavaScript on the client side. Using getStaticProps can help to ensure that your pages are properly server-rendered and therefore more easily crawlable by search engines.
Simplified data fetching: getStaticProps makes it easy to fetch data at build time, which can simplify the process of retrieving data for your application. This can be especially useful if you are fetching data from an API or a database, as it allows you to handle the data fetching process at build time rather than having to do it on the client side.
Improved security: By fetching data at build time, getStaticProps can help improve your application's security. This is because the data is fetched and rendered on the server, rather than being fetched on the client side where it could potentially be manipulated by malicious actors.

Disadvantages:

Every tool that has an advantage, also has it's disadvantages as well, and here a a few disadvantages of using getStaticProps

Increased build time: getStaticProps requires that data be fetched and pre-rendered at build time, which can increase the overall build time of your application. This can be especially problematic if you have a large amount of data that needs to be fetched or a complex data fetching process.
Limited to build time: getStaticProps can only be used to fetch data at build time, which means that it is not suitable for situations where you need to fetch data on the fly, such as when the user interacts with your application or when the data changes frequently. In these cases, you will need to use a different approach, such as getServerSideProps or the useEffect hook in a component.
Static data only: getStaticProps is designed to work with static data, which means it is unsuitable for situations where the data is dynamic or changes frequently. If you need to fetch dynamic data, you will need to use a different approach, such as getServerSideProps or the useEffect hook in a component.

Conclusion

Overall, while getStaticProps can be a useful tool for improving the performance, SEO, and security of your Next.js application, it is important to carefully consider whether it is the right choice for your particular use case.

That will be all for this section. if you find this article helpful, then click on the follow button to get more updates and helpful resources on javascript, Reactjs, and Next.js. You can also follow me on Twitter to get useful resources and tech trends.

How I Got Hired Contributing to open source projects

OGBONNA SUNDAY — Wed, 05 Jul 2023 16:55:17 +0000

In the tech space, getting a job is not totally based on how good you are at the technical side of things, but rather your positioning. This means being able to put yourself out there and show employers how your skills and experience can benefit their company.

It is the goal of 90%-if not 100%-of geeks who are in tech to get hired, but without stepping out to the public that is nearly impossible.

As you read, I will share my journey on how I got into open source and secured my first international role as a software engineer at OpenSauced by contributing to their open source projects.*

My Background and Passion

My desire to know how the web works has always been my driving force. So from the day I was given my first mobile phone (Nokia s2) in the year 2010, I took it upon myself to explore this little gadget at my disposal.

In 2020, during the covid 19 pandemic, I started learning the basics of the web (HTML, CSS & Javascript) with a friend (a graphic designer) who also was trying to transition into UI/UX design. Luckily, I got my first job at Softkodesllc which didn’t last long due to my lack of experience. So I kept on learning until I got into open source.

How I got to know about open source

In a Twitter space by @ShawnBasquiat(The HUNT) was the first place I heard about open source and ways to contribute to open source. Then I ran into a video on YouTube talking about how to make your first contributions to open source projects.

The life-changing move I took that led to the AHA! moment

After listening to the talks and tips from the space, I decided to set a 30-days target for myself to make contributions to open source projects in the month of August 2022. I got my first PR up on the 3rd of the same month https://github.com/open-sauced/hot/pull/285.

The second and third PR followed on the 4th

At first, I was confused about how to start, but when I took up the courage to pick up my first issue, it all started making sense 😇😇😇. I got a warm welcome on my first contribution which resulted in me wanting to make more and more contributions to the same project 🔥🔥 (all thanks to @bdougieyo).

The AHA! moment

Shortly after my contributions, I got a message from the CEO of OpenSauced.

It all seemed like magic to me at first 😊😊...but it was reality! My first step towards working in public earned me a Software Engineering role 🍕🍕

That's my short story on how I got hired making open-source contributions 💫💫

Tips

If you are looking to get started with open source, here are some tips to get started:

Choose a Project that Aligns with Your Interests: Start by identifying open-source projects that align with your passions and skills. Whether it's web development, machine learning, or design, finding a project that excites you will keep you motivated and engaged.
Start Small and Contribute: Begin by tackling small tasks or bugs within the project. This allows you to familiarize yourself with the codebase and workflow. Look for "good first issue" or "beginner-friendly" tags that indicate suitable tasks for newcomers.
Engage with the Community: Join the project's community forums, mailing lists, or chat channels. Introduce yourself, ask questions, and seek guidance from experienced contributors. Engaging with the community not only helps you learn but also opens doors to collaboration and mentorship opportunities.
Read Documentation and Code: Invest time in understanding the project's documentation and codebase. Familiarize yourself with the project's structure, coding conventions, and guidelines. This knowledge will help you navigate the code more efficiently and contribute effectively.
Embrace Feedback and Learn from Others: Open source is a collaborative environment, so be open to feedback from experienced contributors. Take constructive criticism positively and use it to improve your skills. Learning from others' code and approaches will also broaden your understanding of best practices.

With these few tips listed, you can kick-start your journey into open source.

_This is not fiction. However, this piece does not guarantee the desired result you might need. It is designed to point you toward the right path. And as it was coined in Fiedler’s Contingency Theory _

There is no one best way to get things done.

Hence, there is a need for a contingency plan

Leveraging OpenSauced AI to Generate Compelling PR Descriptions

OGBONNA SUNDAY — Wed, 07 Jun 2023 10:25:16 +0000

Introduction

In the realm of software development, pull requests (PRs) are pivotal to collaboration and maintaining high-quality codebases. Crafting informative and engaging PR descriptions is essential to ensure efficient code review and effective communication among developers. With the advent of artificial intelligence (AI) and powerful tools like OpenSauced AI, developers can now leverage AI algorithms to streamline the process of generating compelling PR descriptions.

In this blog post, we will explore how to use OpenSauced AI to generate Well-crafted PR descriptions that will expedite the review process, enhance collaboration, and ensure a thorough understanding of the changes being proposed.

Installation

This tool is a Chrome extension and can be installed via the chrome extension store.

You can also install it from the official opensauced.ai page.

AI-Powered PR Descriptions

Now that it's install you can accelerate your code review process with OpenSauced's AI-powered PR description generator. Once the extension is installed, you'll see an orange sauce icon at the top right corner of your Chrome browser and you'll be ready to generate your PR description.

If you don't see that orange icon on the screenshot above, you can browse through your list of extensions to find the installed extension.

Now we need to visit the PR that we want to generate a description. Once we are in the PR, we can click on the more menu icon to edit the comment as shown in the screenshot below:

Once in editing mode, you'll see the OpenSauced icon at the top similar in to the next screenshot.

At this point, all you have to do is move you cursor to the area in your PR where you want to input the description and click on the orange sauce icon to start generating the description.

And Boom... That's how easy it is to generate Well-crafted PR descriptions for your open PR's 😊 😊

Quick Notes

You need to authenticate with your GitHub account to use this tool.

While OpenSauced AI provides an initial draft, it is important to customize and refine the generated PR description to align with the project's voice and style.

Streamline Code Review with OpenSauced AI.

OpenSauced AI simplifies the task of communicating code changes, context, and benefits to reviewers and stakeholders. As a software developer, this is a must-have extension on your browser that can help speed up review time on a PR, as well as increase the chances of the proposed change's acceptance.

That will be all for today... Stay Saucy🍕🍕😊

Understanding Pure and Impure Functions in Javascript

OGBONNA SUNDAY — Sat, 25 Jun 2022 20:02:47 +0000

Introduction

Before my migration into ReactJs, I never knew about functions being pure or impure. I only understand functions as a set of statements that performs a task or calculates a value.

But after my migration to react, I learnt so much about javascript and functions and I'll be sharing my knowledge on javascript functions in today's article.

What are functions in javascript?

From the definition of W3schools

A JavaScript function is a block of code designed to perform a particular task. JavaScript function is executed when "something" invokes it (calls it).

Pure functions

A pure function is a function that returns a value that's computed based on its arguments. Pure function takes in at least one argument and always returns a value or another function. They do not cause side effects , set global variables , or change anything about application state. They treat their arguments as immutable data.

In order to understand pure function, let's first take a look at an impure function:

const frederick = {
   name: "frederick douglass",
   canRead: false,
   canWrite: false
  }

Function selfEducate(){
  frederick.canRead = true;
  frederick.canWrite = true;
  return frederick 
 }

selfEducate()
console.log(frederick)

// { name: "frederick douglass", canRead: true, canWrite: true}

The selfEducate function is not a pure function. It does not take any arguments, it does not return a value or a function, it also changes a variable outside it's scope frederick. Once the selfEducate function is invoked, something about the "world" has changed. It causes side effect.

Another example of an impure function is:

const frederick = {
   name: "frederick douglass",
   canRead: false,
   canWrite: false
  }

const selfEducate = person => {
  person.canRead = true;
  person.canWrite = true;
  return person
 }

console.log(selfEducate(frederick))
console.log(frederick)

// { name: "frederick douglass", canRead: true, canWrite: true}
// { name: "frederick douglass", canRead: true, canWrite: true}

Pure functions are testable

Pure functions are naturally testable. They do not change anything about their environment or "world", and therefore do not require a complicated test setup or teardown. Everything a pure function needs, it accesses via arguments. When testing a pure function, you control the arguments, and thus you can estimate the outcome. The second selfEducate function above is also impure. It causes side effects. Invoking the function mutates the objects that are sent to it. If we could treat the arguments sent to the function as immutable data, then we would have a pure function.

Let's have this function take an argument:

const frederick = {
   name: "frederick douglass",
   canRead: false,
   canWrite: false
  }

const selfEducate = person => ({
  ...person,
  canRead: true,
  canWrite: true 
})

console.log(selfEducate(frederick))
console.log(frederick)

// { name: "frederick douglass", canRead: true, canWrite: true}
// { name: "frederick douglass", canRead: false, canWrite: false}

Finally, this version of selfEducate is a pure function. It computes a value based on the argument that was sent to it: the person. It returns a ne person object without mutating the argument sent to it and therefore has no side effects.

Now let's examine an impure function that mutates the DOM

  function Header(text){
  let h1 = document.createElement("h1");
  h1.innerText = text;
  document.body.appendChild(h1);
}

Header("Header() caused side effects");

The Header function creates a heading-one element with specific text and adds it to the DOM. This function is impure. It does not return a function or a value, and it causes side effects: a changed DOM.

In React, the UI is expressed with pure function. In the following sample below, Header is a pure function that can be used to create h1 elements just like the previous example. However, this function on it's own does not cause side effects because it does not mutate the DOM. This function will create an h1 element, and its up to some other part of the application to use that element to change the DOM:

  const Header = props => <h1>{props.title}</h1>;

Pure functions are another core concepts of functional programming. They will make your life much easier because they will not affect your application's state.When writing functions, try to follow these three rules:

The function should take in at least one argument.
Te function should return a value or another function.
The function should not change or mutate any of it's arguments.

Data Transformation

How does anything change in an application if the data is immutable?. Functional programming is all about transforming data from one form to another. We'll produce transformed copies using functions. These functions make our code less imperative and thus reduce complexity.

You don not need a special frameork to understand how to produce one dataset that is based upon another. Javascript already has the necessary tools for the task built into the language. They are two core functions you must master in order to be proficient with functional javascript: Array.map and Array.reduce. For the sack of simplicity, i'll be talking about those two function in another episodes of my blog.

Conclusion

That wil be all for thi section. if you find thi article helpful, then click on the follow button to get more updates and helpful resources on javascript, Reactjs and Nextjs. You can also follow me on twitter @o_sunday15 to get useful resources and tech trends.

Understanding Object Literal Enhancement In Javascript

OGBONNA SUNDAY — Tue, 12 Apr 2022 00:13:21 +0000

Definition

Object literal enhancement is the opposite of destructuring. it's the process of restructuring or putting the object back together.

Remember in my previous blog, i talked about about Array and Object destructuring, and stated that destructuring is the process of unpacking a small part of something from the main part. Well, with object literal enhancement , we can grab variables from the global scope and add them to an object.

const name = "Tallac"
const elevation = 9738
const funHike = {name, elevation}
console.log(funHike); //{name: "tallac", elevation: 9738}

name and elevation are now keys of the funHike object.

We can also create object methods with object literal enhancement or restructuring.

const name = "Tallac"
const elevation = 9738
const print = function(){
    console.log(`Mt. ${this.name} is ${this.elevation} feet tall`)
}
const funHike = {name, elevation, print}
funHike.print(); // Mt. Tallac is 9738 feet tall

Notice we use this keyword to access the object keys.

When defining object methods, it's no longer necessary to use the function keyword.

//old
var skier = {
  name: name,
  sound: sound,
  powderYell: function () {
    var yell = this.sound.toUpperCase();
    console.log(`${yell} ${yell} ${yell}!!!`);
  },
  speed: function (mph) {
    this.speed = mph;
    console.log("speed", mph);
  },
};

// New
const skier = {
  name,
  sound,
  powderYell() {
    let yell = this.sound.toUpperCase();
    console.log(`${yell} ${yell} ${yell}!!!`);
  },
  speed(mph) {
    this.speed = mph;
    console.log("speed", mph);
  },
};

Conclusion

In conclusion, Object Literal Enhancement allows us to pull global variables into object and reduce typing by making th function keyword unnecessary.

If you find this article helpful, then click on the follow button to get more updates and helpful resources on Javascript, ReactJs and NextJs.. You can also follow me on twitter @o_sunday15 to get useful resources and tech trends.

Don't forget to leave a comment on what you think and know also....😎😎

Array and Object Destructuring in Javascript

OGBONNA SUNDAY — Mon, 04 Apr 2022 02:07:33 +0000

Intro

Since ES2016, Javascript syntax has supported creative ways of scoping variables within objects and arrays. These creative technique are widely used among the React community. Today i'll keep our focus only on one of this technique called Destructuring.

What is Destructuring?

In the simplest of definitions, it's the process of unpacking a small part of something from the main part.

Object Destructuring

Destructuring assignment allows you to locally scope fields within an object and to declare which values will be used. Consider the sandwich object. It has four keys, but we only want to use the values of two. We can scope bread and meat to be used locally.

const sandwich = {
  bread: "dutch crunch" 
  meat: "tuna",
  cheese: "swiss",
  toppings: ["lettuce", "tomato", "mustard"]
};
const {bread, meat}= sandwich;
console.log(bread, meat); // dutch crunch tuna

The code above pulls bread and meat out of the object and creates local variables for them. However, if we declare these destructured variables using let, the bread and meat variables can be changed without changing the original sandwich object.

const sandwich = {
  bread: "dutch crunch" 
  meat: "tuna",
  cheese: "swiss",
  toppings: ["lettuce", "tomato", "mustard"]
};
let {bread, meat}= sandwich;
bread = "garlic";
meat = "turkey";
console.log(bread); // garlic
console.log(meat); // turkey

console.log(sandwich.bread, sandwich.meat) // dutch crunch tuna

We can also destructure incoming functions arguments. Consider this function that would log a persons name as a lord.

const lordify = (regularPerson) => {
  console.log(`${regularPerson.firstName} of centerbury`);
};
const regularPerson = {
  firstName: "bill",
  lastName: "wilson",
};
lordify(regularPerson); // bill of centerbury

Instead of using the dot notation syntax to dig into the object, we can destructure the values we need out of the regularPerson.

const lordify =({firstName}) =>{
  console.log(`${firstName} of centerbury`)
}
const regularPerson = {
  firstName: "bill",
  lastName: "wilson"
}
lordify(regularPerson) // bill of centerbury

Let's take this one level farther to reflect a data change. Now, the regularPerson object has a new nested object on the spouse key:

const regularPerson = {
  firstName: "bill",
  lastName: "wilson",
  spouse: {
    firstName: "phil",
    lastName: "wilson",
  },
};

If we wanted to lordify the spouse's first name, we'd adjust the function's destructured arguments slightly:

const lordify = ({ spouse: { firstName } }) => {
  console.log(`${firstName} of centerbury`);
};
lordify(regularPerson); // phil of centerbury

Using the colon and nested curly braces,we can destructure the firstName from the spouse object.

Array Destructuring

Values can also be destructured from arrays. Imagine that we wanted to assign the first value of an array to a variable name:

const [firstAnimal] = ["Horse", "Mouse", "Cat"];
console.log(firstAnimal) // Horse

We can also pass over unnecessary values with list matching using commas. List matching occurs when commas take the place of elements that should be skipped. With the same array, we can access the last value by replacing the first two values with commas:

const [, , lastAnimal] = ["Horse", "Mouse", "Cat"];
console.log(lastAnimal); // Cat

Conclusion

And that will be all for this section. If you find this article helpful, then click on the follow button to get more updates and helpful resources on Javascript, ReactJs and NextJs.. You can also follow me on twitter @o_sunday15 to get useful resources and tech trends.