Questions tagged [react.js]
React is a JavaScript library for building user interfaces. It uses a declarative paradigm that makes it easier to reason about your application and aims to be both efficient and flexible.
550 questions
-2
votes
0
answers
37
views
Best Practices for Complex React Cart Component with Multiple Mutations and State Management [closed]
I have a complex shopping cart component (~300 lines) in React TypeScript that handles grouped basket items with continue quantity updates, deletions, and bulk selections. Looking for feedback on ...
- 97
2
votes
0
answers
41
views
React modal form implementation for name, image and weather
I'm building a modal form in React. It collects a name, image URL, and weather selection. It works, but I’d like to improve:
Code structure
State handling
Reusability
Accessibility
Here’s the code:
<...
- 21
2
votes
0
answers
39
views
Vite ReactJS Case opener
I build project Case opening simulator in React JS + tailwind.
I am looking for maybe another way to implement the structure of code and tell me if I've done something wrong, what I should do better ...
- 21
0
votes
0
answers
33
views
Fully animated React reorderable list
I've been playing around more and more with React recently, and wound up wanting to create a fully animated reorderable list. You can get idea about what it looks like here.
It's a self contained ...
- 101
1
vote
0
answers
43
views
Typescript robust Fetch wrapper with Retry and Error handling
I am building a TS wrapper around the fetch that adds automatic retries for certain errors. The error handling using a custom ApiError class and maps various error ...
- 143
2
votes
1
answer
52
views
React + Typescript Grid Traversal
Been learning some react and typescript and wanted to get some feedback on this small project I did. Feel free to be as nit-picky as you like.
...
- 91
3
votes
0
answers
50
views
React section toggle with single active panel
I’ve built a working animated panel menu in React using Framer Motion. Only one section expands at a time, making the animation smooth and visually clean.
However, I’d like help improving or ...
- 31
1
vote
1
answer
110
views
React TODO list component
The code makes unnecessary API calls because there are two useEffect hooks that both fetch data. The first useEffect runs on mount and fetches data for page 1, while the second useEffect runs whenever ...
- 121
0
votes
0
answers
23
views
Using react refs to control debouncing behaviour
I am learning about refs by using the React learning resources and encountered this challenge: https://react.dev/learn/referencing-values-with-refs#fix-debouncing
The provided solution uses a ref to ...
0
votes
0
answers
36
views
Load List of Movies Using useReducer hook
I am learning react.js, and I am on a way learning react hooks.
I followed some examples on 'useReducer' where I have a search input for searching movies, and I load the list of movies from API.
The ...
- 643
1
vote
1
answer
94
views
Axios wrapper used with API requests
I have created Axios wrapper following SOLID principles. Is there any feedback on improving it's structure in a more cleaner and better way?
axiosconfig.ts
...
- 193
1
vote
0
answers
37
views
Making a shell around jointjs for react, wondering between two approaches
The React tutorial of joint js shows a way to use jointjs in react. The tutorial is quite limited: it is basically defining a special named div and putting all jointjs code inside.
The jointjs ...
- 221
0
votes
0
answers
36
views
Optimizing MJPEG stream handling in Service Worker
Background:
I'm implementing a small react app in which an MJPEG stream transmitted by HTTPS is displayed. The stream is only accessible if the user is authorized (using Basic Auth). Therefore, I can ...
- 9
4
votes
3
answers
928
views
TODO application
The assignment was the following:
Users can add at a new Item/Card with Title and Description. Everytime an item is created, it is automatically placed in the TODO column
At any point in time items ...
- 139
2
votes
1
answer
67
views
react-hook-form multiple form instances with validations
My UI page use case includes interchangeable form instances.
I need to render a form component, alongside a selector component which controls what form state is rendering on the form.
Meaning I need ...
- 131
1
vote
1
answer
42
views
Multi Step Record Creation Form with Validation Using Formik, Yup, and MUI
This component is a multistep popup form designed to handle job vacancy creation. It uses MUI for the UI, Formik and Yup for form handling and validation. The form is divided into 4 steps: Job Details,...
- 11
2
votes
1
answer
46
views
Update user name within participants of chats
I have the function which updates user data (currently only name). I would like to optimize its logic and particularly logic of updating participant name in chats. Currently I get entire chats ...
- 113
3
votes
0
answers
39
views
React Heatmap like GitHub Contributions calendar
After having trouble with a few Charting libraries I decided to implement my own GitHub style heatmap with react and React-Bootstrap. It actually works. Since it does not need to be extensible it only ...
- 433
1
vote
0
answers
42
views
Color mode switching in a React App
I'm using a custom hook to handle light/dark mode toggling in my React app, which leverages MUI's theming. The hook manages the mode state, stores it in localStorage, and provides a toggleColorMode ...
- 113
3
votes
2
answers
491
views
LoginForm submission which sends sign in link to email and then sets value in localStorage
My code works perfectly to send a sign in link via email, but for additional optimization I wonder can I use onSubmit with ...
- 113
1
vote
1
answer
54
views
Optimizing react router configuration for E-commerce app
I have a React app using react-router-dom and I want to ensure my routing configuration is efficient and maintainable. Below is my current router setup:
...
- 113
3
votes
0
answers
57
views
Goal tracking app in React
I've developed a goal tracking app in React.
I'm curious whether writing filter functions without using useState is appropriate or not.
Any feedback to optimize the ...
- 31
2
votes
0
answers
28
views
Optimization of React Product Page component
I was working on Product Page with its nested children. On the page we can see a specific product data, add item to the cart and set quantity which we want to add. The codebase is nasty as I only ...
- 113
1
vote
1
answer
110
views
Extract each occurrence from an array of objects
I have a huge list of 4k+ software products.
My goal is simple. I have a list of products. Each of those products has a software value. I would like to extract each software occurrence and covert it ...
- 113
2
votes
0
answers
88
views
Simple drawing website using React
So I have recently started learning web dev (including React since a few days ago), and I have tried to implement a simple drawing website that lets you change the brush size, color, and save the ...
- 360
5
votes
1
answer
537
views
Create an address self-complete bar
I recently received the following code challenge in connection with a job interview. After submitting, I was rejected. I want to know what (if anything) I could have done better here.
Task
Your task ...
- 201
2
votes
1
answer
129
views
How to manage array of states effectively?
I have a working code to have 2 search bars with dropdown suggestions, selectable by both mouse and arrow keys in TypeScript and Fresh/Preact. In there I have to explicitly declare individual hooks ...
- 201
3
votes
2
answers
115
views
Minesweeper in React -- design for state management/data flow
I've pasted here a basic implementation I've done of a Minesweeper game. This is not the full functionality, only the populating/revealing of squares. The idea is that the user inputs ...
- 165
1
vote
1
answer
118
views
Basic login form in React.js
I have made a very basic login/registration form in React.js.
The inputted data is send to a Java Spring Boot Rest-API to create an user or to authenticate using JWT. But in this question I want to ...
- 341
3
votes
0
answers
78
views
React draggable sliding panel
I'm building a sliding bottom panel as a React component, adapting Phuoc Nguyen's excellent draggable element tutorial.
It currently looks like this:
The expected behavior is:
User taps on button to ...
- 31
2
votes
0
answers
36
views
React/Typescript/Redux Tool Kit work flow for Category component
I'm quite new to React hooks/Typescript/Redux. I'm building a mock e-Commerce website for my portfolio. I've got a component (Category) working and rendering data with no issues, it follows the below ...
- 21
1
vote
0
answers
40
views
caching and rendering blog posts in markdown in react
I'd like to know if I'm doing this badly or involving any antipatterns. Masterlist.json contains a list full of all of the posts that exist and should be fetched on the page. Post metadata is ...
- 11
1
vote
0
answers
120
views
Better way to parse data from nested JSON in Javascript/ NextJS
The nested JSON file contains names of US states and corresponding cities.
City.json
...
- 189
3
votes
1
answer
81
views
A tutorial project for learning React - Chat app
I am trying to learn React basics and completed a chat app. My main purpose was to create user-specific text areas and preserve the draft when changing between people. Beforehand I had some trouble ...
- 31
1
vote
1
answer
58
views
Icon styling in Tailwind/React
This is a React icon component, with a few Tailwind classes.
This icon component looks as follows in the UI. The name LongIcon is to differentiate with smaller, ...
- 15
3
votes
0
answers
85
views
Custom AutoComplete component with Typescript Generics
I've created my own AutoComplete form element based on @nextui-org/autocomplete to be able to use it along with react-hook-form. ...
- 131
1
vote
1
answer
72
views
How to encapsulated javascript code using imutable method?
I have this code, but I need to return pure functions instead the mutating functions.
Is it possible? Perhaps using OOP? I don't know how to improve it.
I tried to return the values in each function, ...
- 13
4
votes
1
answer
104
views
access arrow data
I am fetching arrow tabular data from an API. The content-type of the response is application/vnd.apache.arrow.stream. In my react code, I am trying to read the ...
- 41
2
votes
1
answer
67
views
Further memoize context value in react?
This is a contrived example of a question that came up in code review the other day about memoizing context values in React. Let's say I have a hook which returns a memoized value of an expensive ...
- 155
1
vote
0
answers
86
views
Variable button increment picked from an input:range in React 18
I'm a newbye in React. I created some simple Components to practice. For now, I'm using class Component (I want learn either class COmponent or function COmponent).
I would know if I projected ...
- 111
1
vote
1
answer
85
views
Tracking people's check-in and check-out at an event
I have some logic that helps me calculate the data for a summary of an event, which should be rendered as something like this:
...
3
votes
0
answers
287
views
Multi Step Form using React
I recently completed the Multi-Step Form Challenge on Frontend Mentor using React, and I'm eager to receive constructive feedback on my code. I've put in a lot of effort to make the form functional, ...
- 173
0
votes
2
answers
84
views
Trivia game in react
I built a simple trivia with React from Vite that reads from an external JS file.
Here is the main code for the game:
...
- 497
0
votes
1
answer
239
views
Spring Boot Account API with React Frontend and Identicon Integration
I have recently been exploring React and Spring Boot, and I would greatly appreciate your feedback on a practice application that I have developed. The application consists of a Spring Boot backend ...
0
votes
0
answers
49
views
Good way to coding on React-Native?
I'm new on this field of coding, and I start to create by myself a project for iOS and Android. I'm a bit lost of how I supposed to organize my code, I saw different persons on YouTube doing their ...
- 9
2
votes
1
answer
233
views
Sorting Visualizer in React
I just started learning React for a university project to make an algorithms visualizer. I need a review of my code below for visualizing selection sort.
I would also appreciate suggestion on how to ...
- 31
0
votes
1
answer
51
views
Choose a marker for the map based on the alerts it has
I need help to refactor this code, I think I can avoid the first two functions that filter the array. Also in the third part where I use the result of these two filters:
...
2
votes
0
answers
788
views
React hook to play audio with Web Audio API
My goal was to make playing sounds in my React game easy and efficient. Using <audio> tags wasn't an option, because on mobile it creates huge delays between ...
- 121
2
votes
0
answers
843
views
React/Next.js code for a "back to top" button
Pretty new to React/Next.js. This is for a "back to top" button. Any thoughts on whether this can be improved? I haven't really got my head around when ...
- 21
2
votes
1
answer
177
views
Function component wrapper for the js-year-calendar widget
I have this class component from the rc-year-calendar library.
...
