|
fsif posted:And now in React 18 strict mode, they've been forcing useEffect to run twice, which effectively breaks a lot of common implementations of the hook (like data fetching). I was going to say "This should be totally fine as long as you're properly handling the cleanup on the effect" but the fact that almost nobody actually does that seems to be the problem they're trying to address at the framework level.
|
#
?
Jul 8, 2022 22:17
|
|
|
|
| # ? May 19, 2024 03:59 |
|
|
We have a website that is broken up into three projects, with a lot of shared stuff between them. Most of time only one of the projects is being worked on at a time, but building in Jenkins builds all 3 so it takes a while. One person had the idea to package each of the 3 in our repository so we could just npm install the ones we aren't working on. Those packages would be updated every time anyone makes a change, even dev-level, not production. I feel like this is just more work than necessary and a better route is to just put the shared stuff in a package and just not navigate to the pages of the projects not being worked on. In the event that something in the shared package is being updated, which isn't nearly as often, then the person would need to build all 3 to test anyway. Is the other idea actually good? Is there something else to do instead?
|
|
#
?
Jul 13, 2022 14:30
|
|
|
The Merkinman posted:We have a website that is broken up into three projects, with a lot of shared stuff between them. Most of time only one of the projects is being worked on at a time, but building in Jenkins builds all 3 so it takes a while. One person had the idea to package each of the 3 in our repository so we could just npm install the ones we aren't working on. Those packages would be updated every time anyone makes a change, even dev-level, not production. I feel like this is just more work than necessary and a better route is to just put the shared stuff in a package and just not navigate to the pages of the projects not being worked on. In the event that something in the shared package is being updated, which isn't nearly as often, then the person would need to build all 3 to test anyway. If the projects are JS have you looked at Turborepo? I don't fully understand the situation you're describing but I think Turborepo is supposed to solve these kinds of issues with its build caching.
|
|
#
?
Jul 13, 2022 16:44
|
|
|
We have a monorepo and I guess trying to reduce build times since it builds all of the projects in the monorepo even if the developer is only working on one.
|
|
#
?
Jul 13, 2022 18:10
|
|
|
The Merkinman posted:We have a monorepo and I guess trying to reduce build times since it builds all of the projects in the monorepo even if the developer is only working on one. I think that's exactly what turborepo is supposed to solve since it caches your builds and only rebuilds projects if files have changed. I believe I also saw someone who created a deploy shell script for GitHub actions that would use the output from that build to only deploy projects that had changed. If a project matched "cache hit" in its output then it wouldn't deploy, but if it matched "cache miss" it would deploy. I'm just in the middle of evaluaing turborepo for our company right now (moving from a many-repo setup) so I can't speak personally to how good it is. Our tooling is a poo poo show at the moment so basically anything looks incredible to me.
|
|
#
?
Jul 13, 2022 18:29
|
|
|
The Merkinman posted:We have a monorepo and I guess trying to reduce build times since it builds all of the projects in the monorepo even if the developer is only working on one. at my last company we talked about (but never implemented) writing a small bash script that checked changed files against main branch and would conditionally run build commands. a lot easier said than done, but that's most likely how i would approach it
|
|
#
?
Jul 13, 2022 18:38
|
|
|
most cicd platforms can do folder filters so the pipeline only runs when files in that folder have changed
|
|
#
?
Jul 13, 2022 18:40
|
|
|
Bazel is also supposed to solve that problem; you configure all the monorepo dependencies, and it knows precisely what to build. But Bazel is also so insane to configure that it likely causes more problems than it solves. Buck is Facebooks version of the same thing. I don't know of anyone outside FB who has adopted it.
|
|
#
?
Jul 13, 2022 18:53
|
|
|
nx may be an option too
|
|
#
?
Jul 13, 2022 19:52
|
|
|
Thanks for all the suggestions. So it sounds like this is a common situation, but the whole "publish new version to npm on any change" is not the way to address it.
|
|
#
?
Jul 13, 2022 20:23
|
|
|
Are you guys telling me that these webdev build systems don't come out of the box with a way to say "don't build literally everything in the folder tree, just build the stuff that actually goes into the target I'm trying to build"? Literal make was able to do this forty years ago.
|
|
#
?
Jul 14, 2022 00:51
|
|
|
Jabor posted:Are you guys telling me that these webdev build systems don't come out of the box with a way to say "don't build literally everything in the folder tree, just build the stuff that actually goes into the target I'm trying to build"? this isn't the problem that was presented, hth
|
|
#
?
Jul 14, 2022 15:53
|
|
|
Chenghiz posted:this isn't the problem that was presented, hth The Merkinman posted:We have a monorepo and I guess trying to reduce build times since it builds all of the projects in the monorepo even if the developer is only working on one. What is the problem being asked about then? Is it keeping around previous build outputs so that you don't need to rebuild the subprojects you're not actively changing? That's something that forty-year-old software was also able to do, at least on the level of "not rebuilding this entire subproject if nothing in it changed".
|
|
#
?
Jul 14, 2022 15:57
|
|
|
Our CICD examines the PR / commit and generates a list of affected files, which it compares with a (hard-coded) dependency graph to determine which build targets need to be rebuilt. Yeah, make does the same thing but make is typically only aware of files modified locally since the last build. In a CICD env where the repo is pristine make assumes all files are new so it will build everything. To use make effectively in this situation, it'd somehow need to be aware of the list of files changed in the PR. Presumably 40 year old software has git-aware support, but idk, I haven't used make in forever.
|
|
#
?
Jul 14, 2022 16:57
|
|
|
Anyone using Vite? I just dropped it in as a replacement for create-react-app in one of my apps and wow is it ever fast.
|
|
#
?
Jul 14, 2022 17:48
|
|
|
I was just introduced to it by a coworker and and we're using it in a poc, seems pretty good so far
|
|
#
?
Jul 14, 2022 17:50
|
|
|
I use it with Svelte/Svelte-Kit and it is very good compared to the alternatives I've suffered in the past. My only real gripe is it'll sometimes need restarting if I screw with it's environment (env vars, file names, folders) too much when refactoring. But it restarts really fast!
|
|
#
?
Jul 14, 2022 17:54
|
|
|
trying out remix-run and never having tried out next.js, god drat this is a lot of abstracted-away magic. very nice, but kinda annoying but i guess that's the world we live in now
|
|
#
?
Jul 17, 2022 09:08
|
|
|
teen phone cutie posted:trying out remix-run and never having tried out next.js, god drat this is a lot of abstracted-away magic. Which parts? I didn't find it that magical, but then again I'm a recovering Rails developer
|
|
#
?
Jul 17, 2022 14:15
|
|
|
i'm pretty early on in my learning but for one, the naming of loader, action, etc functions that just run magically to fetch data
|
|
#
?
Jul 17, 2022 17:48
|
|
|
"a library is code you call; a framework is code that calls you" is probably too cheeky to be accurate but also a good way of framing next/remix etc we've been writing code using frameworks like that for decades, just hasn't been in vogue in javascript lately, instead leaving people to basically write their own frameworks for every non-trivial project (at work we have a horrendous home-rolled data data loading+server-side rendering layer we're trying to just swap out for nextjs getServerSideProps in a new codebase). i'm really excited about this new generation of react frameworks
|
|
#
?
Jul 17, 2022 17:52
|
|
|
abraham linksys posted:at work we have a horrendous home-rolled data data loading+server-side rendering layer we're trying to just swap out for nextjs getServerSideProps in a new codebase Is every other company out there doing this poo poo, or are we all working for the same company?
|
|
#
?
Jul 17, 2022 18:33
|
|
|
I’m going to be jumping into react soon and haven’t used it in years, many versions ago. Does anyone have a recommendation for some good training/courses to get me back up to speed? I’d like something that starts from the ground up so I can unlearn all my old bad habits and get a handle for the right way to use it these days.
|
|
#
?
Jul 17, 2022 18:53
|
|
|
the new React docs beta site is good
|
|
#
?
Jul 17, 2022 20:56
|
|
|
teen phone cutie posted:i'm pretty early on in my learning but for one, the naming of loader, action, etc functions that just run magically to fetch data Ah, yeah I guess I don't find it that magical. No more than getServerSideProps or whatever. Every framework is gonna have some level of convention. Earlier today on our Rails app I couldn't figure out where a method was defined. THAT'S magic, and it sucks.
|
|
#
?
Jul 18, 2022 02:10
|
|
|
so actually one thing that i'm not understanding about remix (and i guess SSR in general), how do I go about using component libraries? Like for example, I want to install this drawer react component, but the issue is it's doesn't handle SSR, so none of the styles the drawer needs show up when the page is rendered. Does this just mean i'm totally hosed and probably going to have to roll my own interactive components? Things that need JS to appear like modals, toasts, tooltips, etc.
|
|
#
?
Jul 18, 2022 05:38
|
|
|
I don't know about Remix but usually you can indicate that a component should only be used client-side with React.lazy and the import function import('a.tsx').then(module => ...) (not to be confused with the import statement import a.tsx). This might be relevant https://github.com/remix-run/remix/discussions/2936
|
|
#
?
Jul 18, 2022 10:35
|
|
|
teen phone cutie posted:so actually one thing that i'm not understanding about remix (and i guess SSR in general), how do I go about using component libraries? How does the drawer normally include its styles? A lot of libraries require you to import a CSS file from the dist folder, which in the case of Remix you would use in conjunction with the links function. For me when I'm using SSR it's not really with the expectation that things will look correct without javascript, just that the content is on the page. So if it's using CSS-in-JS and looks whack with Javascript turned off my suggestion would be to turn Javascript on 
|
|
#
?
Jul 18, 2022 17:18
|
|
|
novamute posted:I was going to say "This should be totally fine as long as you're properly handling the cleanup on the effect" but the fact that almost nobody actually does that seems to be the problem they're trying to address at the framework level. 
|
|
#
?
Jul 18, 2022 18:35
|
|
|
After doing some more research I still don't really understand how you're supposed to do safely data fetching in useEffect now. I guess for any heavy computation like that you need to create a ref that says "this already ran so don't run it again?" Also yeah I know I should just use a third party data fetching lib and I normally do.
|
|
#
?
Jul 18, 2022 18:37
|
|
|
prom candy posted:How does the drawer normally include its styles? A lot of libraries require you to import a CSS file from the dist folder, which in the case of Remix you would use in conjunction with the links function. ah yes okay that did it  i'm getting the feeling i'm about to be asking a lot of stupid questions in this thread
|
|
#
?
Jul 18, 2022 23:49
|
|
|
prom candy posted:After doing some more research I still don't really understand how you're supposed to do safely data fetching in useEffect now. I guess for any heavy computation like that you need to create a ref that says "this already ran so don't run it again?" Also yeah I know I should just use a third party data fetching lib and I normally do. I thought the idea was that's not what they wanted useEffect to be used for e: i dunno what you are supposed to use tho barkbell fucked around with this message at 01:26 on Jul 19, 2022 |
|
#
?
Jul 19, 2022 00:31
|
|
|
barkbell posted:I thought the idea was that's not what they wanted useEffect to be used for Use Tanstack Query (formerly react-query). It does all the complicated "doing it right" stuff for you.
|
|
#
?
Jul 19, 2022 01:28
|
|
|
teen phone cutie posted:ah yes okay that did it fire away, i'm always happy to be on the answering end of stupid questions on this forum, it's a nice break from being on the asking end. Roadie posted:Use Tanstack Query (formerly react-query). It does all the complicated "doing it right" stuff for you. don't these kinds of libraries all use useEffect under the hood though? I like that so many libraries are going cross-platform to work with React, Vue, and Svelte. I haven't used react/tanstack-query because I settled on RTK-Query but I'll have to take another look at this since it seems like it's becoming the standard.
|
|
#
?
Jul 19, 2022 04:18
|
|
|
prom candy posted:don't these kinds of libraries all use useEffect under the hood though? Yes, but they do it correctly.
|
|
#
?
Jul 19, 2022 22:49
|
|
|
prom candy posted:After doing some more research I still don't really understand how you're supposed to do safely data fetching in useEffect now. I guess for any heavy computation like that you need to create a ref that says "this already ran so don't run it again?" Also yeah I know I should just use a third party data fetching lib and I normally do. useMemo is what you should be using to avoid redoing heavy computation rather than useEffect+ref For safe data fetching the main thing is to just 1) run any cleanup necessary in the useEffect cleanup function and 2) be aware that responses can still come back after the cleanup func depending on how you aborted the initial request (and can arrive out of order coming back even after the newest rendered useEffect fetches successfully). https://beta.reactjs.org/learn/synchronizing-with-effects#fetching-data
|
|
#
?
Jul 19, 2022 23:54
|
|
|
I can’t find a straight answer: if I deploy a SSG Next site on Netlify, am I still able to use next/image?
|
|
#
?
Jul 20, 2022 01:49
|
|
|
novamute posted:useMemo is what you should be using to avoid redoing heavy computation rather than useEffect+ref Thanks, those docs make it pretty clear. Maybe I'll just use Remix for everything from now on.
|
|
#
?
Jul 20, 2022 05:47
|
|
|
So I have a useeffect that fetches a API every 5 seconds and updates data. One thing I'm not particularly good at is remmebering how to only save different data to state. So right now I have useEffect Data= Fetch API SetState(data) Runeveryfiveseconds How would I do that setState to examine the data it has and then only add new data it sees?
|
|
#
?
Jul 20, 2022 22:50
|
|
|
|
| # ? May 19, 2024 03:59 |
|
|
worms butthole guy posted:So I have a useeffect that fetches a API every 5 seconds and updates data. One thing I'm not particularly good at is remmebering how to only save different data to state. So right now I have By comparing the state vs data before calling setState? That's only if you don't want the state to update at all. The main alternative is to just update the state every time and make sure whatever components depend on it to render are properly memoed so they won't rerender if the relevant portions of the state haven't changed.
|
|
#
?
Jul 20, 2022 23:35
|
|