useReducer Counter - React Typing CST Test

useReducer Counter — React Code

Manages counter state using useReducer hook for more complex logic.

import React, { useReducer } from 'react';

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

const ReducerCounter = () => {
	const [state, dispatch] = useReducer(reducer, { count: 0 });
	return (
		<div>
		<h2>Count: {state.count}</h2>
		<button onClick={() => dispatch({type: 'INCREMENT'})}>+</button>
		<button onClick={() => dispatch({type: 'DECREMENT'})}>-</button>
		<button onClick={() => dispatch({type: 'RESET'})}>Reset</button>
		</div>
	);
};

export default ReducerCounter;

React Language Guide

React is a declarative, component-based JavaScript library for building user interfaces, primarily for single-page applications. It allows developers to create reusable UI components and manage application state efficiently.

More React Typing Exercises

Practice Other Languages