Forem: Adaobi Okwuosa

Differences Between Blockchain Design Systems and Solidity Design Patterns

Adaobi Okwuosa — Thu, 24 Jul 2025 13:32:41 +0000

While both blockchain design systems and Solidity design patterns aim to improve the development of decentralized applications, they operate at different levels of abstraction and serve distinct purposes. Below, we explain their differences in detail.

1. Scope and Abstraction

Blockchain Design Systems:

Definition: A blockchain design system refers to the overarching architectural framework for building blockchain-based applications. It encompasses the structure, components, and interactions of the entire blockchain ecosystem, including on-chain and off-chain elements.
Scope: Broad, covering the entire application stack, including the blockchain protocol, consensus mechanisms, smart contracts, front-end interfaces, and off-chain services like oracles or storage solutions.
Examples: A multi-tier architecture with a presentation tier (user interface), application tier (smart contracts), and data tier (blockchain ledger).
Focus: System-wide concerns like scalability, interoperability, performance, and security across distributed components.
Context: Applies to the design of dApps, protocols, or blockchain networks, integrating components like peer-to-peer networks, consensus algorithms, and external data feeds.

Solidity Design Patterns:

Definition: Solidity design patterns are specific, reusable coding templates or best practices for writing smart contracts in Solidity, addressing common programming challenges within the Ethereum Virtual Machine (EVM).
Scope: Narrow, focusing solely on the smart contract layer, specifically how code is structured and implemented in Solidity.
Examples: Factory, Proxy, Withdrawal, and State Machine patterns, as discussed above.
Focus: Contract-specific concerns like gas efficiency, security, modularity, and maintainability within the EVM.
Context: Applies to the implementation of individual smart contracts or their interactions within a single blockchain.

2. Purpose and Application

Blockchain Design Systems:

Purpose: To provide a holistic blueprint for designing decentralized systems, ensuring components like smart contracts, oracles, and user interfaces work cohesively.
Application: Used by architects and developers to design the entire dApp or blockchain network, addressing questions like:
How will the blockchain interact with off-chain systems? (e.g., using oracles for external data)
What consensus mechanism suits the application’s needs?
How will the front-end communicate with smart contracts?
Example: Designing a decentralized finance (DeFi) platform with a layered architecture: a React-based front-end, Solidity smart contracts for logic, and an off-chain oracle for price feeds.

Solidity Design Patterns:

Purpose: To solve specific coding challenges within smart contracts, ensuring they are secure, gas-efficient, and maintainable.
Application: Used by Solidity developers to implement smart contracts with standardized solutions, addressing issues like:
How to securely distribute funds? (Withdrawal pattern)
How to upgrade a contract without losing state? (Proxy pattern)
How to restrict function access? (Access Restriction pattern)
Example: Implementing a crowdfunding contract using the State Machine pattern to manage funding stages and the Withdrawal pattern to securely distribute funds.

3. Granularity

Blockchain Design Systems: Operate at a macro level, defining the architecture of the entire system. They include patterns like peer-to-peer, layered, or access control architectures, which guide the organization of distributed components.
Solidity Design Patterns: Operate at a micro level, focusing on the internal structure and logic of individual smart contracts. They address specific coding challenges within the Solidity language and EVM constraints.

4. Examples in Context

Blockchain Design System

Example: A supply chain dApp might use a layered architecture with:

Presentation Tier: A web interface for users to track goods.
Application Tier: Solidity smart contracts for recording transactions.
Data Tier: The blockchain ledger for immutable storage.
Off-Chain Services: Oracles for real-world data like shipment statuses.

Solidity Design Pattern

Example: Within the same dApp, a smart contract tracking goods might use the State Machine pattern to manage shipment stages (e.g., "In Transit," "Delivered") and the Access Restriction pattern to limit updates to authorized parties.

5. Relationship and Integration

Blockchain Design Systems provide the framework within which Solidity design patterns are applied. For instance, a blockchain design system might specify that a dApp uses a state machine for contract logic, and Solidity developers implement this using the State Machine pattern.
Solidity Design Patterns are a subset of tools used within the smart contract layer of a blockchain design system. They ensure that the contract-level implementation aligns with the system’s broader goals, such as security and efficiency.

6. Challenges and Considerations

Blockchain Design Systems:

Challenges include ensuring scalability, interoperability, and performance across distributed components.

Requires knowledge of blockchain protocols, consensus mechanisms, and off-chain integration.

Solidity Design Patterns:

Challenges include managing gas costs, ensuring security against attacks (e.g., reentrancy), and handling EVM limitations.

Requires deep understanding of Solidity and EVM-specific constraints, such as immutability and deterministic execution.

Conclusion

Blockchain design systems and Solidity design patterns serve complementary roles in decentralized application development. Blockchain design systems provide a high-level architectural framework for the entire ecosystem, ensuring cohesive integration of on-chain and off-chain components. Solidity design patterns, conversely, offer granular, contract-specific solutions to optimize smart contract code for security, efficiency, and maintainability. By understanding and applying both, developers can build robust, scalable, and secure dApps that leverage the full potential of blockchain technology.

For further exploration, refer to:

Solidity Documentation

OpenZeppelin for audited contract templates

Ethereum.org for community tutorials

Exploring Design Patterns in Solidity

Adaobi Okwuosa — Thu, 24 Jul 2025 13:14:36 +0000

Solidity, the primary programming language for Ethereum smart contracts, leverages design patterns to create secure, efficient, and maintainable decentralized applications (dApps). Design patterns are reusable solutions to common problems in software development, tailored to the unique constraints of blockchain environments, such as gas optimization, immutability, and security. Below, we explore some of the most widely used Solidity design patterns, their purposes, and practical examples.

Key Solidity Design Patterns

Factory Pattern: The Factory pattern enables a contract to create and manage multiple instances of other contracts, often referred to as child contracts. This pattern is useful for deploying similar contracts with different parameters, improving modularity and scalability. Example: A factory contract for creating ERC-20 token contracts for different projects. Use Case: Streamlining the deployment of multiple instances while tracking their addresses. Code Example:

pragma solidity ^0.8.0;

contract Token {
    uint256 public value;
    constructor(uint256 _value) {
        value = _value;
    }
}

contract TokenFactory {
    mapping(address => address) public tokens;

    function createToken(uint256 _value) public {
        address newToken = address(new Token(_value));
        tokens[msg.sender] = newToken;
    }
}

Benefits: Simplifies contract management and reduces deployment costs by centralizing creation logic.

Singleton Pattern: The Singleton pattern ensures that only one instance of a contract exists on the blockchain, useful for scenarios requiring a single point of control, such as a configuration contract. Example: A contract managing global settings for a dApp. Use Case: Prevents multiple instances that could cause inconsistencies. Code Example:

pragma solidity ^0.8.0;

contract Singleton {
    address public owner;
    constructor() {
        owner = msg.sender;
    }

    modifier onlyOwner() {
        require(msg.sender == owner, "Not authorized");
        _;
    }

    function updateSettings() public onlyOwner {
        // Update logic
    }
}

Benefits: Enforces centralized control but requires careful access management.

State Machine Pattern: The State Machine pattern manages a contract’s behavior through distinct stages, ensuring functions are only executable in specific states. Example: A crowdfunding contract with stages like "Funding," "Active," and "Completed." Use Case: Enforcing logical progression in contract execution. Code Example:

pragma solidity ^0.8.0;

contract StateMachine {
    enum Stages { Init, Active, Completed }
    Stages public currentStage = Stages.Init;

    function proceedToNextStage() internal {
        currentStage = Stages(uint(currentStage) + 1);
    }

    function activate() public {
        require(currentStage == Stages.Init, "Invalid stage");
        proceedToNextStage();
    }

    function complete() public {
        require(currentStage == Stages.Active, "Invalid stage");
        proceedToNextStage();
    }
}

Benefits: Enhances control over contract lifecycle and prevents invalid state transitions.

Withdrawal Pattern: The Withdrawal pattern, also known as "pull-over-push," allows users to withdraw funds from a contract rather than the contract pushing funds to them. This mitigates risks like reentrancy attacks. Example: A contract distributing dividends to shareholders. Use Case: Securely handling ether or token distribution. Code Example:

pragma solidity ^0.8.0;

contract Withdrawal {
    mapping(address => uint256) public balances;

    function deposit() public payable {
        balances[msg.sender] += msg.value;
    }

    function withdraw() public {
        uint256 amount = balances[msg.sender];
        require(amount > 0, "No funds to withdraw");
        balances[msg.sender] = 0;
        payable(msg.sender).transfer(amount);
    }
}

Benefits: Enhances security by avoiding automatic fund transfers.

Proxy Pattern: The Proxy pattern allows upgrading a contract’s logic while preserving its state, addressing the immutability of blockchain contracts. A proxy contract delegates calls to an implementation contract. Example: Upgrading a contract to fix bugs without changing its address. Use Case: Maintaining contract functionality over time. Code Example:

pragma solidity ^0.8.0;

contract Proxy {
    address public implementation;

    function setImplementation(address _impl) public {
        implementation = _impl;
    }

    fallback() external payable {
        (bool success, ) = implementation.delegatecall(msg.data);
        require(success, "Delegatecall failed");
    }
}

Benefits: Enables upgradability but requires careful implementation to avoid vulnerabilities.

Access Restriction Pattern: This pattern restricts function execution based on caller identity or conditions, enhancing security. Example: Limiting administrative functions to specific addresses. Use Case: Protecting sensitive operations. Code Example:

pragma solidity ^0.8.0;

contract AccessRestriction {
    address public owner = msg.sender;

    modifier onlyOwner() {
        require(msg.sender == owner, "Not owner");
        _;
    }

    function restrictedFunction() public onlyOwner {
        // Restricted logic
    }
}

Benefits: Prevents unauthorized access to critical functions.

Benefits of Solidity Design Patterns

Security: Patterns like Withdrawal and Access Restriction reduce vulnerabilities like reentrancy or unauthorized access.
Gas Optimization: Patterns like Tight Variable Packing minimize gas costs by optimizing data storage.
Maintainability: Structured patterns improve code readability and collaboration.
Reusability: Patterns provide standardized solutions, reducing development time.

Resources for Further Learning

Solidity Documentation: Offers detailed guides on best practices.
OpenZeppelin: Provides audited contract templates for patterns like Proxy and Access Control.
Ethereum.org: Community-driven tutorials on smart contract development.

By adopting these patterns, Solidity developers can build robust, secure, and efficient smart contracts, enhancing the reliability of dApps on Ethereum and other EVM-compatible blockchains.

useReducer and how it is different from useState

Adaobi Okwuosa — Tue, 29 Oct 2024 01:19:53 +0000

Introduction
When to Use useState
When to Use useReducer
Example 1: Counter App with useState
Example 2: Counter App with useReducer
Example 3: Form Input Handling with useReducer
Example 4: Building a quiz app with useReducer
Comparison Between useState and useReducer
Conclusion

Introduction

React offers two key hooks for managing state: useState and useReducer. While both are designed to handle state in functional components, they are used in different scenarios. This article explores the differences between the two and highlights when you should use each, with examples for better understanding

When to Use useState

useState is a simple and effective hook for handling local state when:

You have simple state to manage (like booleans, numbers, or strings).
You want direct updates to state with minimal setup.
The state does not have complex transitions or dependencies on multiple variables.

Basic Syntax

const [state, setState] = useState(initialState);

state: The current state.
setState: A function to update the state.
initialState:The initial state

When to Use useReducer

useReducer is useful when:

You have complex state logic.
Multiple state updates depend on one another.

Basic Syntax

const [state, dispatch] = useReducer(reducer, initialState);

state: The current state.
dispatch: A function to send an action to the reducer to trigger a state update.
reducer: A reducer is a pure function that takes two arguments: the current state and an action. It returns the new state based on the action.

Basic Syntax

const reducer = (state, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 };
        case 'DECREMENT':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

Action: An action is an object that describes what change should happen
It typically has a type property and optionally a payload.
The type tells the reducer what kind of state change to make.
The payload carries any additional data needed for the change.
InitialState:The initial state ,just like initialstate in useState.

Example 1 counter app with useState

import React, { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

Explanation

We use useState to track the count value.
We have two buttons: one to increment and one to decrement the count state.
The state is updated directly using the setCount function.

Example 2: Counter App with useReducer

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

Explanation

The reducer function controls how the state should change based on the action dispatched.
Instead of directly setting the state, we dispatch actions (increment, decrement) to trigger changes.

Example 3: Form Input Handling with useReducer

Let’s expand the concept to handling a form with multiple input fields. This scenario is ideal for useReducer since it updates multiple state properties based on actions.

import React, { useReducer } from 'react';

const initialState = {
  name: '',
  email: ''
};

function reducer(state, action) {
  switch (action.type) {
    case 'setName':
      return { ...state, name: action.payload };
    case 'setEmail':
      return { ...state, email: action.payload };
    default:
      return state;
  }
}

export default function Form() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <input
        type="text"
        value={state.name}
        onChange={(e) => dispatch({ type: 'setName', payload: e.target.value })}
        placeholder="Name"
      />
      <input
        type="email"
        value={state.email}
        onChange={(e) => dispatch({ type: 'setEmail', payload: e.target.value })}
        placeholder="Email"
      />
      <p>Name: {state.name}</p>
      <p>Email: {state.email}</p>
    </div>
  );
}

Explanation

The reducer manages the form state by updating different properties (name, email) based on the action’s type.
Dispatch sends the action to the reducer to update the state. The payload carries the data (e.g., the input value).

Example 4: Building a quiz app with useReducer

Note: styling was done with tailwindcss

import React, { useReducer } from 'react';

// Quiz data with detailed explanations
const quizData = [
  {
    question: "What hook is used to handle complex state logic in React?",
    options: ["useState", "useReducer", "useEffect", "useContext"],
    correct: 1,
    explanation: "useReducer is specifically designed for complex state management scenarios."
  },
  {
    question: "Which function updates the state in useReducer?",
    options: ["setState", "dispatch", "update", "setReducer"],
    correct: 1,
    explanation: "dispatch is the function provided by useReducer to trigger state updates."
  },
  {
    question: "What pattern is useReducer based on?",
    options: ["Observer Pattern", "Redux Pattern", "Factory Pattern", "Module Pattern"],
    correct: 1,
    explanation: "useReducer is inspired by Redux's state management pattern."
  }
];

// Initial state with feedback state added
const initialState = {
  currentQuestion: 0,
  score: 0,
  showScore: false,
  selectedOption: null,
  showFeedback: false, // New state for showing answer feedback
};

// Enhanced reducer with feedback handling
const reducer = (state, action) => {
  switch (action.type) {
    case 'SELECT_OPTION':
      return {
        ...state,
        selectedOption: action.payload,
        showFeedback: true, // Show feedback when option is selected
      };
    case 'NEXT_QUESTION':
      const isCorrect = action.payload === quizData[state.currentQuestion].correct;
      const nextQuestion = state.currentQuestion + 1;
      return {
        ...state,
        score: isCorrect ? state.score + 1 : state.score,
        currentQuestion: nextQuestion,
        showScore: nextQuestion === quizData.length,
        selectedOption: null,
        showFeedback: false, // Reset feedback for next question
      };
    case 'RESTART':
      return initialState;
    default:
      return state;
  }
};

const Quiz = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  const { currentQuestion, score, showScore, selectedOption, showFeedback } = state;

  const handleOptionClick = (optionIndex) => {
    dispatch({ type: 'SELECT_OPTION', payload: optionIndex });
  };

  const handleNext = () => {
    if (selectedOption !== null) {
      dispatch({ type: 'NEXT_QUESTION', payload: selectedOption });
    }
  };

  const handleRestart = () => {
    dispatch({ type: 'RESTART' });
  };

  if (showScore) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
        <div className="bg-white rounded-lg shadow-lg p-8 max-w-md w-full">
          <h2 className="text-2xl font-bold text-center mb-4">Quiz Complete!</h2>
          <p className="text-xl text-center mb-6">
            Your score: {score} out of {quizData.length}
          </p>
          <button
            onClick={handleRestart}
            className="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition-colors"
          >
            Restart Quiz
          </button>
        </div>
      </div>
    );
  }

  const currentQuizData = quizData[currentQuestion];
  const isCorrectAnswer = (optionIndex) => optionIndex === currentQuizData.correct;

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
      <div className="bg-white rounded-lg shadow-lg p-8 max-w-md w-full">
        <div className="mb-6">
          <p className="text-sm text-gray-500 mb-2">
            Question {currentQuestion + 1}/{quizData.length}
          </p>
          <h2 className="text-xl font-semibold mb-4">{currentQuizData.question}</h2>
        </div>

        <div className="space-y-3 mb-6">
          {currentQuizData.options.map((option, index) => {
            let buttonStyle = 'bg-gray-50 hover:bg-gray-100';

            if (showFeedback && selectedOption === index) {
              buttonStyle = isCorrectAnswer(index) 
                ? 'bg-green-100 border-2 border-green-500 text-green-700'
                : 'bg-red-100 border-2 border-red-500 text-red-700';
            }

            return (
              <button
                key={index}
                onClick={() => handleOptionClick(index)}
                disabled={showFeedback}
                className={`w-full p-3 text-left rounded-lg transition-colors ${buttonStyle}`}
              >
                {option}
              </button>
            );
          })}
        </div>

        {showFeedback && (
          <div className={`p-4 rounded-lg mb-4 ${
            isCorrectAnswer(selectedOption)
              ? 'bg-green-50 text-green-800'
              : 'bg-red-50 text-red-800'
          }`}>
            {isCorrectAnswer(selectedOption)
              ? "Correct! "
              : `Incorrect. The correct answer was: ${currentQuizData.options[currentQuizData.correct]}. `}
            {currentQuizData.explanation}
          </div>
        )}

        <button
          onClick={handleNext}
          disabled={!showFeedback}
          className={`w-full py-2 px-4 rounded transition-colors ${
            !showFeedback
              ? 'bg-gray-300 cursor-not-allowed'
              : 'bg-blue-500 text-white hover:bg-blue-600'
          }`}
        >
          Next Question
        </button>
      </div>
    </div>
  );
};

export default Quiz;

Explanation

*initial state with useReducer

// Initial state
const initialState = {
  currentQuestion: 0,
  score: 0,
  showScore: false,
  selectedOption: null,
  showFeedback: false, // New state for feedback
};

Reducer Function

const reducer = (state, action) => {
  switch (action.type) {
    case 'SELECT_OPTION':
      return {
        ...state,
        selectedOption: action.payload,
        showFeedback: true, // Show feedback immediately
      };
    case 'NEXT_QUESTION':
      const isCorrect = action.payload === quizData[state.currentQuestion].correct;
      // ... rest of the logic

The reducer handles three actions:

SELECT_OPTION: When user selects an answer
NEXT_QUESTION: When moving to the next question
RESTART: When restarting the quiz

Styling Logic

let buttonStyle = 'bg-gray-50 hover:bg-gray-100';

if (showFeedback && selectedOption === index) {
  buttonStyle = isCorrectAnswer(index) 
    ? 'bg-green-100 border-2 border-green-500 text-green-700'
    : 'bg-red-100 border-2 border-red-500 text-red-700';
}

This code determines the button styling:

Default: Gray background
Correct answer: Green background with green border
Wrong answer: Red background with red border

Feedback Display

{showFeedback && (
  <div className={`p-4 rounded-lg mb-4 ${
    isCorrectAnswer(selectedOption)
      ? 'bg-green-50 text-green-800'
      : 'bg-red-50 text-red-800'
  }`}>
    {isCorrectAnswer(selectedOption)
      ? "Correct! "
      : `Incorrect. The correct answer was: ${currentQuizData.options[currentQuizData.correct]}. `}
    {currentQuizData.explanation}
  </div>
)}

This shows feedback after an answer is selected:

*Displays whether the answer was correct or incorrect
*Shows the correct answer if wrong
*Includes an explanation

Hosted link of the quiz app

quiztechnicalwriting.vercel.app

Comparison Between useState and useReducer

Feature	useState	useReducer
Best for	Simple state	Complex state logic
State Management	Direct, using `setState`	Managed through a reducer function
Boilerplate Code	Minimal	Requires more setup
State Update	Inline with `setState`	Managed by `dispatch` and `reducer`

Conclusion

Both useState and useReducer are powerful hooks for managing state in functional components. useState is best suited for simple state, while useReducer shines when handling more complex scenarios where state updates are closely related. Choosing the right one depends on the complexity of the state you need to manage.

Understanding and Creating Custom Hooks in React

Adaobi Okwuosa — Fri, 30 Aug 2024 09:47:20 +0000

Prerequisites
Installation
Introduction
What are Custom Hooks?
When Should You Create a Custom Hook?
Example: Creating a Custom Hook
- Step 1: Identify the Reusable Logic
- Step 2: Extracting Logic into a Custom Hook
- Step 3: Using the Custom Hook
Benefits of Custom Hooks
Best Practices for Custom Hooks
Conclusion

Prerequisites:

Ensure you have the necessary background knowledge in these:

Basic Knowledge of React
Node.js and npm

Installation:

To get started with a new React project using Vite, follow these steps:

i. Open your terminal and run the following command to create a new project:

   npm create vite@latest my-react-app --template react

ii. Navigate into your project directory:

     cd my-react-app

iii. Install dependencies: Install the necessary packages for your project:

   npm install

iv. Start the development server: Run the development server:

    npm run dev

Your React app will now be running, and you can view it in your browser at http://localhost:5173.

Introduction:

What are React Hooks?:

React hooks are special functions that allow you to use state and other React features in functional components. Hooks like useState and useEffect are essential for managing state and side effects.

What are Custom Hooks?:

custom hooks can be described as a way to reuse logic across multiple components. Instead of repeating code, you can encapsulate it in a custom hook, making your components cleaner and your code easier to manage. just like React hooks when using custom hooks ensure that you start your component name with (use followed by the name you want to give the component,e.g useFetchData).useFetchData can be a custom Hook that fetches data from an API and returns it to your component.

understanding Hooks?

Understanding Hooks:
Hooks like useState, useEffect, and useContext allow you to use state and other React features without writing a class. They are building blocks that let you handle component logic in a modular way.

When should you create a custom hook?

Custom hooks let you reuse stateful logic across different components. A simple example is a counter component, that has increment, decrement, and reset functionality, if you need the same logic in multiple components, the logic can be moved to a custom hook. Another commonly used example is a component that fetches data from an API, and if you need the same logic in multiple components, you can move that logic to a custom hook.

Example creating a custom hook

Example: let create a simple counter App with React hook(useState).in app.jsx

Step 1 identify the reusable logic

import React, { useState } from "react";

import "./App.css";

function App() {
  // usestate hooks
  const [counterstate, setCounterstate] = useState(0);

  // function for increment,decrement and reset
  const increment = () => {
    setCounterstate((prev) => prev + 1);
  };
  const decrement = () => {
    setCounterstate((prev) => prev - 1);
  };
  const reset = () => {
    setCounterstate(0);
  };
  return (
    <div className="container">
      <div>
        <h1>Counter App </h1>
        <h2>{counterstate}</h2>
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

in the code above,the reusable logic include counterstate,initial state(o),increment,decrement and reset function. the increment adds 1 to the initial state while decrement subtract 1 from initial state,while reset resets to first initial state.

Step 2 extracting logic into a custom hook

we can create a folder in src folder named Hooks,then a file called useCouter.jsx for the custom hook as shown below.

import React, { useState } from "react";

const useCounter = (initialvalue) => {
  const [value, setValue] = useState(initialvalue);
  const increment = () => {
    setValue((prev) => prev + 1);
  };
  const decrement = () => {
    setValue((prev) => prev - 1);
  };
  const reset = () => {
    setValue(initialvalue);
  };

  return { value, increment, decrement, reset };
};

export default useCounter;

Step 3 using the custom hook

now, Let's use our custom hook in App.jsx.

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";

function App() {

  const { value, increment, decrement, reset } = useCounter(0);
    return (
    <div className="container">
      <div>
        <h1>Counter App </h1>
        <h2>{value}</h2>
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

Example 2.

Let's create a custom hook useFetch for all API calls.

import React, { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, error, loading };
};

export default useFetch;

usage

in App.jsx, we can use this custom hook to fetch a username from JSON placeholder as shown below;

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";
import useFetch from "./Hooks/useFetch";

function App() {
  const { value, increment, decrement, reset } = useCounter(0);
  const { data, error, loading } = useFetch(
    "https://jsonplaceholder.typicode.com/users"
  );

  return (
    <div className="container">
      <div>
        <h1>Counter Appp </h1>
        <h2>{value}</h2>
        {loading && <div>Loading....</div>}
        {error && <div>Error: {error.message}</div>}
        {data && data.length > 0 && (
          <div>
            <h2>Username: {data[0].username}</h2>
          </div>
        )}
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

Benefits of custom hooks

Reusability:

One of the main benefits is reusability. You can use the same custom hook in multiple components, reducing code duplication.

Separation of Concerns:

Custom hooks help you separate the logic from the UI. Your components focus on rendering, while the custom hooks handle the logic.

Cleaner Components:

By moving complex logic to custom hooks, your components become simpler and easier to understand.

Best practices for custom hooks

Naming Conventions:

Custom hooks should start with the word "use" to follow the React naming convention. This also helps in identifying hooks quickly in your code.

Example: useFetch, useForm, useAuth.

Handling Dependencies:

When using hooks like useEffect inside a custom hook, make sure to handle dependencies correctly to avoid bugs or unnecessary re-renders.

Avoiding Unnecessary Re-renders:

Optimize your custom hooks by memoizing values or using hooks like useCallback and useMemo to avoid re-running expensive calculations or re-fetching data.

Conclusion

we've explored the concept of custom hooks and their role in simplifying and enhancing React application development. By creating custom hooks, you can encapsulate and reuse stateful logic, which helps in keeping your components clean and maintainable.

Check out the project on GitHub: My GitHub Repository

Forem: Adaobi Okwuosa

Differences Between Blockchain Design Systems and Solidity Design Patterns

1. Scope and Abstraction

Blockchain Design Systems:

Solidity Design Patterns:

2. Purpose and Application

Blockchain Design Systems:

Solidity Design Patterns:

3. Granularity

4. Examples in Context

Blockchain Design System

Solidity Design Pattern

5. Relationship and Integration

6. Challenges and Considerations

Conclusion

Exploring Design Patterns in Solidity

Key Solidity Design Patterns

Benefits of Solidity Design Patterns

Resources for Further Learning

useReducer and how it is different from useState

Table of Contents

Introduction

When to Use useState

When to Use useReducer

Example 1 counter app with useState

Explanation

Example 2: Counter App with useReducer

Explanation

Example 3: Form Input Handling with useReducer

Explanation

Example 4: Building a quiz app with useReducer

Explanation

The reducer handles three actions:

Styling Logic

This code determines the button styling:

Feedback Display

This shows feedback after an answer is selected:

Hosted link of the quiz app

Comparison Between useState and useReducer

Conclusion

Understanding and Creating Custom Hooks in React

Table of Contents

Prerequisites:

Installation:

Introduction:

What are React Hooks?:

What are Custom Hooks?:

understanding Hooks?

When should you create a custom hook?

Example creating a custom hook

Step 1 identify the reusable logic

Step 2 extracting logic into a custom hook

Step 3 using the custom hook

Example 2.

usage

Benefits of custom hooks

Reusability:

Separation of Concerns:

Cleaner Components:

Best practices for custom hooks

Naming Conventions:

Handling Dependencies:

Avoiding Unnecessary Re-renders:

Conclusion