One More State Variable

JS ManualPayment.js components > ManualPayment > ManualPayment.js > ... 42 const { toggleModal, refetchOrders } = props; 43 const [products, setProducts] = useState([]); 44 const { publishProducts } = useProducts(); 45 const apolloClient = useApolloClient(); 46 const { _id: shopId } = useShop(); 47 const [setupTotal, setSetupTotal] = useState(0); 48 const [bondTotal, setBondTotal] = useState(0); 49 const [deliveryTotal, setDeliveryTotal] = useState(0); 50 const [lateBookingFee, setLateBookingFee] = useState(0); 51 const [startDate, setStartDate] = useState(new Date()); 52 const [endDate, setEndDate] = useState(addDays(new Date(), 1); 53 const [days, setDays] = useState(differenceInCalendarDays(endDate, startDate)); 54 const [selected, setSelected] = useState([]); 55 const [customerEmail, setCustomerEmail] = useState(""); 56 const [customerName, setCustomerName] = useState(""); 57 const [fulfillment, setFulfillment] = useState("Pickup"); 58 const [defaultOptions, setDefaultOptions] = useState([]); 59 const [options, setOptions] = useState([]); 60 const [selectedCarVariants, setSelectedCarVariants] = useState([]); 61 const uniqueInvoiceIdentifier = uniqueId("AddressForm-"); 62 const [paymentInputRef, setPaymentInputRef] = useState("invoice"); 63 const [paymentMethod, setPaymentMethod] = useState(""); 64 const [customPrices, setCustomPrices] = useState({}); 65 const [creatingCustomVariant, setCreatingCustomVariant] = useState(false); 66 const { createCustomVariant, updateCustomVariant, newNewCustomProductWithVariants } = use 67 const [newProducts, setNewProducts] = useState([]); 68 const [displayNewProductForm, setDisplayNewProductForm] = useState(false); 69 const [customDeliveryPrice, setCustomDeliveryPrice] = useState(""); 70 const [stockAlert, setStockAlert] = useState([]); 71 72 const [displayOrderConfirmation, setDisplayOrderConfirmation] = useState(false); 73 const [displayOrderSuccess, setDisplayOrderSuccess] = useState(false); 74 75 const [address1, setAddress1] = useState(""); 76 const [city, setCity] = useState(""); 77 const [region, setRegion] = useState(""); 78 const [postal, setPostal] = useState(""); 79 const [metafields, setMetafields] = useState([]); 80 const { cart, addItemsToCart, onRemoveCartItems, checkoutMutation } = useCart(); 81 const [cartStore, setCartStore] = useStores(); 82 const [lenderCartItems, setLenderCartItems] = useState([]); 83 const [deliveryFeeAddon, setDeliveryFeeAddon] = useState(0); 84 const [lendingSettings, setLendingSettings] = useState([]);

A computer monitor shows a long JavaScript/React component file filled with dozens of useState declarations for orders, products, payments, addresses, carts, and delivery settings. The joke is that a developer keeps adding “just one more” state variable until the component becomes absurdly overloaded, capturing frontend technical debt and the endless growth of a tangled component. It is commonly sent as a reaction to over-engineered React code or a page with too much state. EN: A computer monitor shows a long JavaScript/React component file filled with dozens of useState declarations for orders, products, payments, addresses, carts, and delivery settings. The joke is that a developer keeps adding “just one more” state variable until the component becomes absurdly overloaded, capturing frontend technical debt and the endless growth of a tangled component. It is commonly sent as a reaction to over-engineered React code or a page with too much state.

• @gentoomemes / 6536 2023-09-27
• @gentoomemes / 18507 2025-09-03