CodeSnips

hcl

# Backend configuration with S3 + DynamoDB locking
terraform {
  backend "s3" {
    bucket         = "company-terraform-state"
    key            = "services/web-app/terraform.tfstate"
    region         = "us-east-1"

Terraform state management and workspace strategies

terraform state-management iac

by Ryan Nakamura 2 tabs

typescript

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

type Patch = Record<string, string | null | undefined>;

function readParams(): URLSearchParams {
  return new URLSearchParams(window.location.search);

Sync a Filter Panel to the URL Query String with a Custom useSearchParams Hook

react hooks url-state

by codesnips 3 tabs

javascript

import React, { useState, useEffect, useCallback, useMemo, useRef, useContext } from 'react';

// 1. useState - managing component state
function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

React hooks - useState, useEffect, and custom hooks

react javascript hooks

by Alex Chang 1 tab

typescript

export interface Todo {
  id: string;
  title: string;
  done: boolean;
}

Optimistic Todo Toggling in React with Rollback via useReducer

javascript typescript react

by codesnips 3 tabs

typescript

import { createContext } from "react";

export type ToastVariant = "info" | "success" | "error";

export interface Toast {
  id: string;

Toast Notification Queue with a useToast Hook and Context Provider in React

react hooks context

by codesnips 4 tabs

typescript

export interface Post {
  id: string;
  body: string;
  liked: boolean;
  likeCount: number;
}

React Query optimistic update for likes

react typescript frontend

by codesnips 3 tabs

typescript

import React from 'react';
import { useToasts } from './useToasts';

export function Toaster() {
  const { toasts, dismiss } = useToasts();

Frontend: toast notifications via a small event bus

react frontend typescript

by codesnips 3 tabs

typescript

import { Injectable } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Injectable()
export class SignupFormService {
  readonly form: FormGroup;

Multi-Step Signup Wizard in Angular with a Shared FormGroup and Stepper Service

angular reactive-forms wizard

by codesnips 4 tabs

javascript

import React, { createContext, useContext, useReducer, useState } from 'react';

// 1. Basic Context
const UserContext = createContext(null);

function UserProvider({ children }) {

State management with Context API and Redux patterns

react redux state-management

by Alex Chang 2 tabs

javascript

import { useState, useEffect, useCallback } from 'react';

export function useLocalStorage(key, initialValue) {
  const readValue = useCallback(() => {
    if (typeof window === 'undefined') return initialValue;
    try {

Persist a React Shopping Cart to localStorage with a Context Provider

javascript react context

by codesnips 3 tabs