DEV Community: Muhammad Awais

Destructuring in React Native

Muhammad Awais — Tue, 25 Aug 2026 09:40:09 +0000

Understanding Destructuring in JavaScript 🚀

If we use the same approach again and again, our code can become repetitive and less readable. To overcome this, Destructuring plays an important role in JavaScript.

Destructuring is a shorter and cleaner way to extract values from arrays and objects. Instead of accessing values through the parent object every time, we can directly extract them and make our code more readable and structured.

Example:

const Person = {
  name: "Awais",
  age: 23,
  id: 3
};

// Old way
const name = Person.name;
const age = Person.age;

console.log(name);
console.log(age);

// Using destructuring
const { name, age } = Person;

console.log(name);
console.log(age);

Destructuring does not affect the original object. It simply extracts the values and makes them easier to use.

Small concept, but an important step toward writing cleaner JavaScript. 💡

JavaScript #Programming #WebDevelopment #LearningInPublic

useState vs useReducer 🚀

Muhammad Awais — Fri, 21 Aug 2026 12:34:54 +0000

useState is perfect for managing simple local state while and useReducer is go to alternative when the state logic becomes complex and deeply nested
How it Works:
Arguments:It accepts two arguments - reducer funtion and inital state.
Return: It return a pair in an array - current state and dispatch function.
dispatch function: dispatch function is used to update the state just like updater function in the useState.

Quick Syntax:const[state,dispatch] = useReducer(reducer,initial State).

useState in React Native

Muhammad Awais — Thu, 20 Aug 2026 13:05:21 +0000

useState is a React Hook that is used in React Native it allows to add a state in functional components(accepts props as an argument and return JSX to render UI).
useState returns an array with two values,

Current State
Function to update the state

we can set a initial value in useState to startwith
const [count,setCount] = useState(1);
here 1 is the initial value count is the current State and setCount is the function to update that current state

Flatlist vs ScrollView

Muhammad Awais — Wed, 19 Aug 2026 06:44:07 +0000

When rendering a list of items in react native we commonly use Flatlist and Scrollview.
Flatlist Renders only those items which are visible on the screen but ScrollView renders all the items once so it can take more space of the memory which can slow down the visibility or memory leakage in react native app when rendering a list of items