Questions tagged [reactjs]
The reactjs tag has no usage guidance.
85
questions
-2
votes
1answer
44 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.
3
votes
3answers
277 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 ...
0
votes
0answers
11 views
Best practice for plugin structure in webpack bundling
We have a software today that we are trying to port to React with the help of Webpack, but before I start, I want some input for best practice since I have only worked with single entry, simple ...
2
votes
0answers
27 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 ...
0
votes
1answer
42 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 ...
1
vote
0answers
33 views
Where to place code which synchronizes state of Redux with localStorage?
In our project, I was need to sync a piece of information between localStorage and the Redux state. Actually I subscribed to changes in a localStorage and in Redux, and if change happens in ...
1
vote
0answers
24 views
Dependency injection of UI components via React context
In React, it's common for libraries, and app-internal utilities, to used context-based dependency injection. Some examples:
function MyComponent() {
const client = useApolloClient(); // Apollo
...
1
vote
0answers
108 views
Updating nested state with React Hooks and Typescript - performance vs clarity
I have some deeply nested react components. Let's limit them to 3 levels of nesting and call them Parent, Children and Grandchildren. The state for the entire app is stored in a single object in the ...
2
votes
1answer
38 views
Render constant props components from an object or by hand?
Lets say I have a component that render some "static" information and another one that is the parent of these components.
function Foo(){
...
return (
<Bar name="I" {......
0
votes
0answers
36 views
Managing adjacent components
(originally asked here, but aparently not the right place)
I managed to create a minimalistic example to reproduce the confusion I'm facing, here's a working SandBox.
I have a page ( see the Profile ...
2
votes
1answer
49 views
ReactJS - lift state to main container or export a helper?
I'm using ReactJS (React Hooks, specifically) to build an application. Part of that application involves account creation, sign-in, and authentication. I only recently finished the sign-in feature, ...
0
votes
0answers
11 views
Storing partial data in a redux store, how should be this done?
In my app I have some data to be fetched from the server (a list of recipes). In certain views, only a preview of the recipe is shown--this includes fields like title, rating, and an image of the ...
-1
votes
1answer
75 views
Why is it called a functional component?
A quick google search shows that the question I have has not been asked directly, and so I ask it here. For what its worth, I am learning react, and I come from a C++ background, where as far as I ...
1
vote
4answers
261 views
Lead developer wants to use a micro-frontend design pattern. Are my concerns valid?
I'm a React developer at a large company working on an enterprise application which draws on a large amount of data, but performs a very specialized task and has only a handful of internal users. The ...
0
votes
1answer
157 views
Passing javascript function vs use imports in Svelte or React component
I wanted to use some function from javascript module in one of my component. Should I pass it in props when making the component or should I just use Imports in component itself to get the javascript ...
0
votes
0answers
25 views
Methods for storing data pre-registration in a web app
I have a web app - it's more complicated than a todo list but for simplicity sake let us assume it is a todo list. The user has the choice to sign up and create an account thus allowing them to store ...
1
vote
2answers
439 views
How to effectively handle 404/500 http errors in server-side rendering web application which uses store for state?
I'm working on a website using server-side rendering approach. I'm using React and Redux for this. Redux handles the state of the application and provides API to change the state. All asynchronous ...
3
votes
0answers
68 views
Architecture and Security in a Web/Native app while generating PDFs
I am trying to make a system where a user can view/download his statements (say salary slips). The user will have ability to download PDF versions of these statements and can also save them to Google ...
2
votes
0answers
56 views
Where to store the state of a complex form in React?
Let us consider a complex form of registering a driver and owner.
The driver will have all these fields:
driver = {
firstName: "xyz",
lastName: "abc",
phone: "1234",
email: "m@g.com,
licence: "...
0
votes
0answers
45 views
Is it better to have a default avatar library on client or server side?
I have a webapp using ReactJS as the frontend and Rails as the backend service.
I have an account manager, where a user can choose multiple avatars from a default library. This library contains ...
0
votes
0answers
45 views
Plugins system for an Electron/React app
I'm developing a Electron/React app which uses Webpack and Asar technologies. It's designed to be a host app providing a common platform for some plugins. These plugins are downloaded and plugged into ...
0
votes
0answers
80 views
Handling user permissions in front-end
I'm building an API that will be used by the front-end in React and I'm not quite sure how I should send the permissions of each user based on their roles. Some fields can only be edited in some ...
0
votes
1answer
198 views
Integrate react app with php app
I have an old php web application, with very bad code.
While a lot of it just has html and ajax calls in the, the wrapper is still php.
I want to develop the new modules in react, and slowly replace ...
1
vote
0answers
182 views
Write integration tests with React using Jest
Let's imagine that we have this Page component:
const Page = () =>
<>
<Topbar />
<Drawer />
<Content />
</>
I'd like to test some interaction within ...
1
vote
0answers
75 views
How to Implement Certain timeout session on multiple pages of a website - REACTJS
Suppose there 5 pages to a website. User flow will be 1->2->3->4->5->FINISH. I want to implement is that whenever a user enters page 3 a timer starts and if he doesn't finish a task ...
1
vote
1answer
441 views
Why are React keys limited to strings?
In React, when rendering a mapping from elements of a list/array/iterable to React elements, we're required to attach a locally-unique key to each element. Generally this is so that if an element ...
2
votes
1answer
68 views
continuous deployment of web application built with multiple packages
Our react web application is broken down to multiple components. Some of these components are part of the same git mono repo and some live in a different repo.
Now, to implement a bug fix we have to ...
-5
votes
1answer
37 views
Easiest way to add tracking of interactivity (mouse clicks, scrolls, multi-touch gestures) to a React Web App already developed?
Context: we have a responsive web application developed in React.js, which we have successfully used a few times to run user studies on Amazon Mechanical Turk. Now, we would like to add interactivity ...
0
votes
1answer
68 views
ReactJS - proper way to handle a responsive design approach?
I've always used CSS and media queries when it comes to responsive design. I've been developing in ReactJS for a while, but I feel my approach to responsive design is sloppy. I find myself using a mix ...
2
votes
1answer
97 views
New components that implement an abstract component, vs variants on a single component.
I have created some stateless functional components that represent round social media icons used for links/sharing, the code looks like this:
AbstractRound
import React from 'react';
import { ...
1
vote
1answer
686 views
How to store blog post in database - React & GraphQL
I am building travel blog using React as frontend Javascript framework along with GraphQL. I am doing this project by myself as a pilot test and I am currently in a phase of translating photoshop ...
2
votes
1answer
578 views
How do functional programming advocates use a framework like React or Angular?
I read this blog post recently:
The Two Pillars of JavaScript
Part 1: How to Escape the 7th Circle of Hell, which is essentially a criticism of object oriented programming, and advocacy for funtional ...
1
vote
1answer
125 views
OrderedMap or List for Redux structure?
I'm implementing a Redux store for a React app using redux-saga for API calls. I've used Immutable.js before for other Redux-using React apps but the nature of previous projects always evidently ...
-2
votes
1answer
512 views
Cross-domain reactjs component
Lets say I have some react components on domain-a.com.
From domain-b.com, an applications calls an API endpoint on domain-a.com. This end point returns the .js of the above mentioned react ...
0
votes
0answers
62 views
Do database CRUD operations dictate whether and application should be one-way or two-way binding?
I am confused (easily done). To me model is the data from the database sent back as JSON.
When I think of that in an Angular context, when two-way binding is configured, it makes me think the ...
2
votes
1answer
85 views
Does Flux/Redux concept about application state put bounds on the size of application?
In Redux (React Flux implementation) guide https://redux.js.org/basics/reducers it is said, that
In Redux, all the application state is stored as a single object
My questions are:
How seriously ...
4
votes
2answers
870 views
Benefits of using a JS Framework
I am starting a new project and trying to decide if I should use a Javascript framework (like vue.js or react) and create a Ruby on Rails API, or use Ruby on Rails to server-side render pages and ...
1
vote
0answers
29 views
React JS: Mixing data types for one state property
In the spirit of minimising state I always have a desire to mix data types for a given state property. For instance, if I were creating a React page that rendered a list of items that could either be ...
0
votes
3answers
192 views
When does it make sense to make an individual React component?
The most obvious criteria for me is for component re-usability, as well as internal state management but aside from that are there are any other good reasons?
For instance, I could have a component ...
1
vote
1answer
347 views
How should I structure React Redux components when requesting Data From an API?
I have a search box I'm going to use on different pages (I use the term 'page' loosely here).
The search box puts its value (the search string) into the Redux state.
The results are populated from an ...
0
votes
1answer
70 views
What types of operations should go into Node.js as opposed to client side javascript functions
I am building a web app with a lot of different API calls: our own proprietary REST API, third-party library API calls, etc. All of these calls either retrieve data, update data, delete data, or ...
6
votes
2answers
3k views
React: Nested object as state vs individual properties
Are there any use-cases where a nested object as state is either more optimal/easier to work with than individual properties?
For instance if I wanted to express some user controls for interacting ...
2
votes
1answer
142 views
Is it bad practice to combine a projects static site with the app?
We are building a react based web app for a project/potential business and I'm wondering if it's ok to include the static site in the web app code?
I've always had a separate basic html and css code ...
1
vote
2answers
512 views
Does it make sense to create a whole new API interface to just handle the web secret key?
In OAuth2.0 we have to send client id and secret along side the user credential to obtain an access token from an authorization server. We have a ReactJS web application that needs to send its request ...
4
votes
2answers
119 views
REST: How to deal with relative resources?
I'm designing an web app with React as front-end, and I'm trying to properly understand REST API practices. Reading resources online, one can get the idea that the REST API is seen kind of like an ...
2
votes
0answers
260 views
Single page React on Rails app vs Multi page React on Rails app [closed]
I've been looking around hoping to get some perspective of the pros and cons of using a Single Page React App vs. a Multi Page React App. The end product of the project is a page with 5 tabs, each ...
0
votes
1answer
151 views
In the react docs why is binding of *this* preferred over arrow functions for event handlers?
In the React docs, the constructor functions of class components contain lines where this is explicitly bound for event handlers e.g. in the docs for handling events
class Toggle extends React....
0
votes
1answer
70 views
Thinking about a setup to work with react and front end development
On my team I'm working as a frontend developer in a React codebase. We're building an application and do everything in React. Before this I was actually always a backend developer. Now I have the ...
1
vote
2answers
962 views
What other approaches are there to break circular dependency in MVC?
I'm attempting to build a web front-end based on the MVC pattern, as opposed to based on the libraries involved (e.g. React.js).
I'm using constructor-based dependency injection and interfaces to de-...
0
votes
1answer
202 views
Redux: When Should I Keep Track of State and When Should I Not?
NOTE: I am new with the whole concept of state management. I never got into the older languages that "explicitly used" states.
I dived into React and Redux for the past week, and as I'm getting into ...
