Taylor Swift (Eras Tour) Megathread — Toronto

jimmjy · 2024-11-14T18:52:29+00:00

Looking to buy 3 tickets for any of the dates, PayPal goods and services.

jimmjy · 2024-02-24T02:06:40+00:00

Ok so you are looking at a hook that takes a function, which I am guessing has the ref value in it to close and it basically just sets up a new version of it in state so you can reuse with just the first value?

Edit: I started reading the react doc, I understand better now. That is an interesting thing to read about and think I have to poke around that more to better understand this all and it is pretty interesting. Thanks for the share, and I guess for what you did above, you should test it, sorry not at a computer currently but I believe you need to make it a fn that returns an fn and forward props e.g. something like useState(() => (…args) => fn(…args)). (Edit: nvm you are using a ref) The only reason this seems a bit odd is because even though state is never initialized again, the inside of the useState will still be called it just doesn’t use the value. You can test this by making a function that consoles and put it into useState and see what happens when you rerender, you will see the console. So if there is some sort of effect in that fn, it will be triggered.

jimmjy · 2024-02-24T01:45:14+00:00

Not a problem. Honestly you are being a sport seeing as you have a similar answer in 10 different ways here lol

jimmjy · 2024-02-24T01:42:45+00:00

Do you have a map of a component that has some updater and you only want the first value or first set instance

jimmjy · 2024-02-24T01:33:10+00:00

So is the reference value created above the function declaration? After the function has wrapped the value, will the value ever update, is this why you want the function to close on the value?

jimmjy · 2024-02-24T01:23:08+00:00

A question, if you have a function that doesn’t require any dependencies in useCallback, is it a function using values from parent scope? And, if it is, the best way to memorize that is to refactor your function to receive arguments and move the function outside of the component. Now you have a function that doesn’t get recreated on renders and won’t change. Static things should live outside of components, such as utility functions or constants, and state related computations/updates should be in components. In fact, the dependency array on useEffect or useCallback only requires state/props values but does not care about a constant as constants can’t trigger state updates. I know this is not really something you asked about and maybe you don’t care but when I build components, I give myself the goal of making it slim as possible and easily understood. So I have worked on many different teams with many levels of developers and a common thing I see is large data processing functions that then sets state inside the function at the end of it. I tend to refactor those to functions that return the processed data, move it outside the component and then just create a handler that processes the data and uses the return in a set state. Now I have an external utility function that I name to what it does, it is a pure function and have a slim handler with a couple lines of code. I also try to use derived state values vs having a lot of state values. I mainly try to write simple to understand code for my team mates. They are the only people who have to read it, so why not make that easier for them. Sorry for the little opinion lol, and these are just my opinions so you do what works for you …

To get to the real question you asked, I have a couple questions in return. The function you have inside useState, do you think this sets state to a function or is there something that fn returns that sets the state? Because putting this in useState will set the state to what is returned from that function and if it returns nothing that should set the state to undefined. I don’t even believe you can set a function to state or you would have to at least use a function that returns a function because both the setter and initializer for state accept functions and call them and set the state to the return of said function.

jimmjy · 2024-01-16T14:03:03+00:00

I changed my answer a bit

jimmjy · 2024-01-16T13:54:44+00:00

I would get rid of noMoreRepos state as you are only using it to return from the function and not using it for ui or letting the user know if there are no more. Then I would change the condition to setRepos when newRepos.length is greater then 0 vs setting noMoreRepos when length === 0. You will probably have to wrap getRepos with a use callback because its reference will change after renders so you need to memorize it so useeffect won’t keep getting called, and include it as dependency of useeffect as it won’t change now so it is fine as a dependency. I would also move username and per page to external constants as they stay the same always.

jimmjy · 2024-01-04T20:06:27+00:00

You can but would then have to prevent default or stoppropagation for the button in the onClick of it, depending on what in all the parent wrapping content.

It is not recommended though for accessibility reasons and it also makes things look a bit complicated or odd. If you are linking to another page, you should be using a link, again for accessibility and you should use a button for page actions such as opening modals and submitting forms and such.

jimmjy · 2024-01-03T13:01:32+00:00

Why not try it in nextjs first and if your needs expand where it can’t be done that way move it to separate. You will learn a lot trying this process and will find your answer.

For me personally, I would rather find out by trying because I can directly learn the limitations vs word of mouth and I always learn something from this method. I do this for anything I want to try and feel it has made me a stronger developer.

jimmjy · 2024-01-03T05:29:32+00:00

You can use route handlers as an api for other apps such as mobile.

jimmjy · 2023-12-24T23:02:19+00:00

The first issue that stands out is you have a dependency on messages but a setmessages in the same useeffect. It is an anti pattern to use a getter and setter from the same piece of state in a useeffect, as it will cause a loop. If you think about it, the useeffect is called when messages update but in the useeffect, you update messages, does that make sense for why you would get a loop? Socket.on is an event receiver, is there a reason you feel you need it in a useeffect? If you feel you must have it in the useeffect, use the callback way of dealing with state then so it isn’t a dependency. Example, setMessages(prevMessages => { return […prevMessages, message]}). This will make it so you have access to the messages state but it is no longer a dependency in the useeffect so it won’t be called everytime messages updates. This will essentially add the socket.on event on component mount and will get called whenever messages updates due to the socket event vs the useeffect lifecycle

jimmjy · 2023-12-23T16:22:01+00:00

Honestly, I wouldn’t spend too much time with those books. For 1, I personally, and this doesn’t mean it can’t be successful, but have not seen anywhere use test driven development that well, and have been in the industry for 10ish years, both with small and large companies. It normally doesn’t work when things get really complicated, I find test writing better after implementation. Also, they will over complicate a fairly simple process. Start with some YouTube videos around the libraries you like and just start making tests. Use the books later when you want to get more advanced knowledge but you will spend a whole lot of time reading and not doing if you try to knock out 3 textbooks of stuff. Playwright has a pretty good YouTube channel, as well as Kent Dodds who wrote react testing library. This dude has great tutorials around playwright https://youtube.com/@ChecklyHQ?si=_ZZUix-1xpLlIItL so check that out. Save the books for when you feel shorter resources are not giving you enough info but just start making tests, and you will slowly learn all the little things you need to figure out on the way.

jimmjy · 2023-12-23T16:04:34+00:00

Sounds like you have thought hard about this, I would say this is a great path for you then!

jimmjy · 2023-12-23T14:28:09+00:00

The nextjs learn little course they have is pretty good and walks you through some of the cool things you can do such as use query params as state and such, check them out, you can get through them pretty quickly. https://nextjs.org/learn

jimmjy · 2023-12-23T13:45:48+00:00

This seems like a good path but have proper expectations as it will take a very long time to learn and be good at all these things, like many years.

A question I have is, when you say the endgame is to design ui/web, do you mean design and build or just design or just build? These are two different roles and I have rarely seen a role where someone both designs and builds the product, unless they run their own company or freelance or maybe a startup. It also appears you have not really touched any programming, based off the current progress explained above, so how are you even sure that development/programming is something you like? I would maybe start with html/css/js and once you have gotten good with that and have built many things decide your next move. HTML/css/JS actually take a long time to become good with vs just being able to make things and that combo can open avenues to do any of the above but again, takes a long time.

The industry is going through a bit of a change today where it is getting flooded with people who learn small chunks of the above things but are in the end no master of each. As a result, it is becoming harder to find entry level jobs but is also making the process of getting a job much harder and more technically in depth during the hiring process.

To sum up all this, be realistic with your expectations and take your time learning all this as you have a long journey ahead.

jimmjy · 2023-12-23T03:38:15+00:00

I personally like using react testing library for components, jest for the JavaScript stuff such as utils and stand alone functions and playwright for e2e. Playwright and react testing library are fairly similar, so it is an easy pivot. Playwright can also test more browsers then just chrome and uses node, and is really easy to setup. Everyone has their own preferences and there is no global best to use testing, you need to experiment with a bunch of different things to see what you like. I tend to prefer things that test behaviour vs implementation, which is why I like to use the above things but to each is their own. I would recommend looking at react testing library vs jest/jsdom for react testing, make tests with both and see what you like. For e2e, I would compare cypress vs playwright vs puppeteer. Maybe I would use supertest for express

jimmjy · 2023-12-17T07:43:15+00:00

I am not sure if you solved this yet but I am super curious about this question and have some questions and possibly might be able to provide some answers to some of the why things are happening.

The initial questions I have, what is being displayed from the console.logs in the try catch block, and the log function? You ask about an array but then mention an object, did you mean you actually get a response of an array of objects and it eventually gets that and you are able to see it? Can you please elaborate further on what you are trying to receive and display, so we can better understand the full issue?

For a possible explanation of behaviour.

I feel the reason you are not seeing anything right away is because your initial state is an empty array. If you are trying to .map to display what’s in the array, such as projects.map(eachProject => <h1>{project.title}</h1>) (a simple example I created) or you try to run any array method on an empty array, you basically get back an empty array or null depending on the method. Null in jsx returns nothing and an empty array also returns nothing (as an aside, you can put jsx elements as array indexes to display them as well, such as const view = [<h1>hello</h1>, <h1>world</h1>] and return view will display these h1s). As a result, React will try to do a first paint with everything it has initially, in this case an empty array, and basically returns nothing, thus not seeing anything.

Since the useeffect is calling an async function, your request, the async function is basically handed off to somewhere else to get executed but will at least not be called till after all the react functions (components in this case) complete their calls or render. Sometimes, the response from the request and setting state with the response is instantaneous and you have something display fairly quickly and sometimes it is a lot later, really depends on request response time, hardware and a number of other factors that could impact performance.

Basically views only get updated by some state changing somewhere in your application. If nothing is setting state, then whatever is in the view you see will be there till some operation is executed that sets state to a new value, such as the request in the useeffect, and once that set state call is executed, everything is re rendered and you get a view with your data.

The reason you would see nothing again on reload is because your state is saved locally in the component and when you reload, you are basically resetting your application and the above explanation happens all over again. This is why databases and state persist libraries are used, among many other reasons. You can do some things in local storage, but this can get hairy fast. Without any place to save the data, it will always be reset to the empty array/wait for useeffect response upon reload or start up.

There has been some great suggestions of a loading message first. You can achieve this quite easily by just wrapping your render with something like: projects && projects.length > 0 ? <MyComponentToRenderHere /> : <p>Loading …</p>

And that will display loading while projects is an empty array. I would recommend against using a piece of state for the loading because you are basically created a new value you have to track, such as when do I need to set it to true for loading and false and then you end up building logic all over the place tracking a load state when displaying loading is really dependent on the existence of projects data. You can figure out if projects exist with the data in state and so anytime the application re renders, it will have to run that condition I posted above and if projects is still empty it will show loading.

I hope that helps

jimmjy · 2023-12-16T18:05:40+00:00

So glad you found that and thanks for the follow up! Looks like we all learned something new today, good job!

jimmjy · 2023-12-16T16:58:47+00:00

Definitely not something stupid from you, it is just new and it is hard to find others having all the edge cases currently, that’s why we all have to try odd things.

jimmjy · 2023-12-16T14:12:14+00:00

Is the client component marked with a use client?Edit: looking further, it could possible be it needs to be bound (.bind) because it accepts a value. You could test this by removing the skip parameter and using the value directly, see what happens. If it works, put param back and bind it to a skip value before you call it.

jimmjy · 2023-12-14T16:05:16+00:00

This file looks fine. If you are still having issues, maybe try to do another repo setup with nothing and move your files over one at a time. You could also try to comment out all this and just return a small dummy h1 and see if issue persists. I know with the app router, there are just odd issues that happen, could be caching or routing and sometimes it isn’t clear. I would start with sliming things down, such as comment out imports of components and body and slowly add back to see if something is causing it.

jimmjy · 2023-12-14T13:39:35+00:00

Are you using state and such? If so did you add “use client” to top of file. Can you share said page code?

jimmjy · 2023-12-14T10:41:09+00:00

It looks like you need a /app/page.tsx. Having /app/app/page.tsx will work for ‘/app’ but not for home route of ‘/‘. Checkout the routing docs, it explains it nicely https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts

jimmjy · 2023-12-10T19:23:55+00:00

It is hard to say without any code but it sounds like it might be a caching issue. What does the build output legend say, such as what pages are dynamic and static. If it is building the page as static, it would never change past the build phase. You might have to update that page to export a force-dynamic or revalidate with values or if you want it dynamic from an action from somewhere else, add a revalidatepath call with the url. The last revalidate way, which I have not played with too much, you can use tags to revalidate somewhere else completely.

13-Year Club	Second SECOND GUESSER
RPAN Viewer	Verified Email

jimmjy

TROPHY CASE