Questions tagged [reactjs]
The reactjs tag has no usage guidance.
128
questions
0
votes
0
answers
75
views
Deciding between two design alternatives for displaying series of screens in mobile applications?
I am developing a mobile application, and one of the features is a "story" that is essentially a series of screens. The screens can be of three main templates:
A "video" template ...
- 9
0
votes
0
answers
71
views
Edge Case For Cookie Based Token Management
I have a React frontend and a Nodejs backend that uses authentication via an OIDC service provider. After a user goes through the SSO authentication flow I store the token (containing a refresh token ...
- 9
1
vote
3
answers
226
views
Does ReactJS Compound Pattern violate the DRY principle?
Let's say we have this component:
const Card = ({ title, description, price, tag, category }) => {
return (
<div>
{title && <h5>{title}</h5>}
{...
- 117
-1
votes
1
answer
139
views
ReactJS hook vs utility function
Should we use utility functions in react or should everything be components and hooks?
I had this scenario:
Utility function for formatting money.
const formatMoney = (value) => value == null ? '' :...
- 117
0
votes
0
answers
61
views
Best Practices for Managing State in React Applications
I'm currently developing a web application using React and I'm looking for the best practices for managing state effectively. I've come across several methods such as using the Context API, Redux, and ...
1
vote
1
answer
171
views
Deciding between logic on the front-end or back-end
Before I begin, I want to say I am very new to this and I am a junior but also solo developer with no seniors to ask for guidance. Please feel free to explain to me that I am not approaching it ...
- 11
0
votes
1
answer
187
views
Is it a good idea to serve a Single Page Application as a static site?
I've built a small single-page web application in React and seen that it's possible to serve the app as a static site on something like S3.
Previously, I considered using Nginx, but as this is lower ...
- 159
0
votes
1
answer
188
views
Monorepo dilemma: Where do you store your common business logics?
In my current monorepo structure for frontend, this is how it looks:
apps\
jira\
confljuence\
packages
ui
utils\src (contains common utils like useDebounce.ts, isEmptyObject.ts, etc.)
From what ...
- 111
0
votes
1
answer
594
views
How could I apply the strategy pattern to a react component? [closed]
For the following component, how would I extract the unit logic to allow for composition? In my actual app I am trying to reduce the amount of logic encoded in the component and I have decided that ...
0
votes
1
answer
147
views
How to actually use global state in React?
In my company, all of the projects use at least some kind of global state library like Redux and MobX.
However, the actual usage is limited to storing fetched data, and it lacks any caching logic or ...
-1
votes
1
answer
152
views
Best approach to communicate C++/Python and Front-End
I work with Computer Vision applications, mainly in Python and C++. Recently, I get involved with a customer that wants to create a UI based on React JS to visualize the results of our software in ...
- 109
1
vote
3
answers
1k
views
Best strategy to push client-side updates to server?
I'm just starting to build a web app using React.js, Next.js, Prisma, & PostgreSQL. In this web app, users can create "projects", which are represented by 10-15 rows in the database. ...
- 21
0
votes
1
answer
198
views
Is it OK to stick with object graph in React State and should I make helpers for handling it?
I am trying to build ERP application using React frontend and I have not found decisive answer whether to use object graphs in React state?
E.g. I would like to build Invoice view and I have the ...
- 1,003
0
votes
1
answer
158
views
Avoiding "handler creep" in React components?
An issue I find myself having with code layout in my React components is that I end up having to define too many handlers.
I generally write only functional components with hooks, but within the body ...
- 1,114
-1
votes
1
answer
101
views
"Select All" in Table is now sending too much data to Server via API - Alternative Ways to Send to Server?
Outline of the current architecture of our web app outlining the issue I'm seeing
Client-side app is React, talking to a server running the Play! framework via an API.
On the page is a table that ...
- 99
0
votes
1
answer
120
views
design pattern advice on method of "injecting" html in React
Say I have a ReactNode post:
const Post = (props:{content:string}) => {
return(
<div>
{textProcessor(props.content)}
</div>
)
}
the role of textProcessor is to 1. to ...
- 189
4
votes
1
answer
921
views
Need a deeper understanding of how a Virtual DOM is different from a real DOM
As all articles say the Virtual DOM is lightweight and allows us to update only those nodes that has to be updated, unlike the real DOM that updates the whole nodes structure.
So the first question: ...
- 147
0
votes
1
answer
605
views
Clean Architecture for React App: Component / View / Page
Abstract
I'm trying to figure out a solid, scalable, clean and practical architecture for react projects.
As a a playground I have a project with two Screen and a JSON server.
When I try to apply a ...
- 207
0
votes
0
answers
125
views
Identify Domain Entities for a search tool interface - Clean Architecture
I am pretty new to Clean Architecture / Onion Achitecture, I actually not sure if the 2 terms are exchangeable.
So it pretty clear to me, considering is a few days I am reading and study about it.
It ...
0
votes
3
answers
2k
views
Optimal method of storing image thumbnails
I'm working on an application with a database containing many recipes. The API is written in Django (with Django REST Framework) and frontend in React.Each recipe is assigned a high-quality image. In ...
- 11
2
votes
2
answers
1k
views
What is the Advantage of React JS over Pure Javascript + PHP?
What exactly is the purpose of React JS? I've heard a few things, like:
It updates the page without refreshing.
It is modular and can reduce redundant coding.
It is faster than updating the DOM ...
- 51
0
votes
0
answers
99
views
Effective cache solution to have the newest data in React Native
Goal
We have an app with different articles. I want to cache an article when the user has read it, but make sure that I display the latest data. I came up with this hook:
React.useEffect(() => {
...
- 101
1
vote
2
answers
2k
views
Preventing parent component re-rendering of a big React component when you "Lift State Up"
I have a very big form - let's call it <MyForm> - consisting of the following:
text fields and dropdowns
custom selector made of selectable cards
table input (for this example 50 rows with each ...
- 121
0
votes
3
answers
206
views
What pattern is a function that returns a component?
Ok I have a bunch of components that all have the same logic but have different css classes. So I wanted to create a sort of factory function that takes the names of the classes as its argument and ...
- 165
0
votes
1
answer
75
views
NextJs Explanation on Ecommerce and Other Project Implementation [closed]
I'm attempting to create a project to increase and enhance my coding skills, and I've lately migrated React to Nextjs. I've noticed that NextJs' main point or strength is rendering;
Could someone ...
- 125
0
votes
1
answer
228
views
Replacing ASP.Net 4 app with microservices and React
Backstory:
My new employer has Dynamics CRM on-prem and it is used by all office staff and other colleagues that are consultants. All other employees are a working force out on various construction ...
- 1
-1
votes
1
answer
166
views
Where should I put/handle periodic data updates in React?
I'm following the guide in https://reactjs.org/docs/thinking-in-react.html which makes sense for data that I request and update on a filter.
However, I want to have some sort of general ...
0
votes
1
answer
56
views
Anyone have data on impact on UX of shipping profiling build in production to users?
I understand that using the React Profiler in production should have a small or negligible impact on user experience at least for profiling 20-50 (guess) components on a page.
I would like to know if ...
- 549
1
vote
2
answers
541
views
React: Ternary operator within component vs outside component
I have a pull request and this pr is being reviewed by co-worker.
Context
I'm using React and a specific component has ternary operator within component like below.
const ExampleComponent = (): React....
- 131
1
vote
2
answers
401
views
Best Practice: Should cascading updates be handled by the frontend or the REST API?
I am designing a timesheet app for logging user tasks using React for frontend and Django REST Framework for backend. The database is PostgreSQL and I have a table for recording the tasks with 4 ...
- 19
4
votes
1
answer
2k
views
Authentication with JWT in HTTP only cookie without refresh token
The motto of the upcoming question is "I don't know what I don't know".
I would like to know if there are downsides or security risks with an authentication implementation.
Right now, I'm ...
- 153
0
votes
1
answer
274
views
Reactjs with large DB
I am working with a very large SQL database through a frontend reactjs application with a node server intermediary using an ORM for query sanitation. However due to the size of the DB it takes some ...
-3
votes
1
answer
134
views
Sharing React Native Component as a "black box"
I'm looking for a way to share a React Native component with 3rd parties without having to share the actual source code.
Something like a .jar in Java or a .dll for C#.
So assuming we have company A ...
- 131
-2
votes
2
answers
1k
views
Advice: How to secure access to photos in a React App
I have a React App (created via create-react-app) secured with OAUTH2. Currently all dynamic content is via REST APIs, secured with the same OAUTH2 token issued at login. It is hosted on AWS.
I want ...
- 19
-1
votes
1
answer
171
views
Loading in and Autocompleting a CSV File React
I'm currently working on a React Application with Firebase that involves a ton of data manipulation and reading. One specific feature is the ability to autofill a form based on a very large CSV file (...
- 23
-2
votes
1
answer
152
views
Should I repeat my code or use if statement?
A question from a friend:
I have multiple usages for the same code, let's say a vertical HTML card. I change the title and a lot of data based on the react component.
it feels unnecessary performance-...
- 121
-3
votes
1
answer
292
views
Testing a React component which receives a function as a prop
Suppose there's a root <App /> which houses multiple components, one of them being, say <SearchBox />.
App component houses the app state (such as searchResults array) and iterates the ...
- 75
1
vote
0
answers
108
views
Reactjs + nodejs external authentication flow
I am developing a RESTful application with nodejs in the backend with express.js as middleware. I am also developing a client in Reactjs.
I want to use an external authentication service (LDAP/AD/ADFS)...
- 111
1
vote
1
answer
591
views
Is it an anti-pattern on React to search for children with a specific element type?
Context
When designing the API of a React component, you may decide to receive props in a more semantical way. Here's a simple example
<Modal headerTitle="foo" />
vs
<Modal>
&...
- 2,450
28
votes
13
answers
9k
views
Ways to explain code when told it doesn't make sense
As a programmer I have found my code frequently elicits the reaction "I don't understand". Whenever I get this response I try my best to explain my code patiently, and not make anyone feel ...
- 500
0
votes
3
answers
773
views
React - When is a backend necessary?
So I'm currently playing around with web development as a project, and I've been looking at React recently. My current issue is that I'm having trouble distinguishing between front and back end ...
- 39
2
votes
2
answers
724
views
React says refs and imperative code are not the right tool for showing and hiding dialogs. Why though?
The docs explicitly state this:
Avoid using refs for anything that can be done declaratively.
For example, instead of exposing open() and close() methods on a Dialog component, pass an isOpen prop to ...
- 131
1
vote
1
answer
45
views
what kind of relationship do child components have with components in react?
I'm currently writing a paper on my react frontend and I'm struggeling to find the right verb for the interaction between child-components and components in react.
For example:
"I have a table ...
- 23
1
vote
0
answers
21
views
Best way to allow other components to change table's focused row?
I have displayProjectTable that gets state from reducer projectData and populates itself.
Currently displayProjectTable has a local state that stores focusedRowID. My problem is that I want other ...
- 111
5
votes
1
answer
383
views
ReactJS with Elasticsearch app architecture
I want some advice regarding my architecture and hosting options.
I'm attempting to build an e-commerce site for e-books. It will use NestJS for the backend and ReactJS+Typescript for the frontend.
...
- 51
-1
votes
1
answer
1k
views
Recommend a way to handle multiple UI frameworks in a pattern library
We are setting up a pattern library.
It's use is on the one hand to document and display our UI elements in a web view. On the other hand, it should also be the place where components are built. The ...
- 9
-2
votes
1
answer
72
views
React class or function for stateful components?
Which is better to use? react class based stateful component or react hooks functional stateful component? I've searched a bit but couldn't find what is preferred to use.
- 101
5
votes
3
answers
554
views
How to manage chaotic code explosion in React application
So we decided to redo UI of our web application in React. Six months down the lane and we have a complete mess of components and reducers and thunks and actions and god knows what not.
We have ...
- 315
2
votes
0
answers
236
views
React Hooks: using state in useEffect without depending on it
I have run into a situation in React where I want to run a function F in a useEffect hook whenever a value V1 from the store changes. F uses another value from the store V2. I only want to run F when ...
- 607
0
votes
1
answer
419
views
Wrapping ReactJS UX component library in another layer of abstraction, pros and cons?
There's AntD library with various UX components. Right now I required to wrap all components which I'm using in another layer, to make an abstraction. For example, if I'm using AntForm component I ...
- 264