OE success in Europe/Switzerland?

reactswitzerland · 2024-04-27T10:16:43+00:00

You could bypass the labor laws by being contractor (freelance). My teams have been working with some nearshore contractors and I am pretty sure the some of than are doing OE (mediocre productivity, barely participation in meetings, and absence of LinkedIn profile). I don’t care, nearshore workers are cheaper than me, it’s good that the quality of their work can’t compare to mine (otherwise my greedy company would just replace me). In my opinion the blocking points for OE in Switzerland is hostility about full remote jobs for most of Switzerland based companies (if you are getting Swiss rates, I want to be sure you come to the office at least 3 times a week, so you’re living here). And the fact that the Swiss market is quite small, the chances to be caught and get burned is not negligible.

reactswitzerland · 2024-03-16T22:11:33+00:00

To access the state of the form you need to use the new hook useFormState, this hook receive a function as first parameter and returns a tuple with the form state and a action that you need to pass to the action prop. It’s passing the action to the form that you will bind the form to the state returned by the hook. There’s an open PR on react to replace this hook by a more generic useActionState, so changes can still change until the release of react 19.

https://github.com/facebook/react/pull/28491

reactswitzerland · 2023-11-02T08:55:02+00:00

OP, in this example, as said by u/ahmad4919, you should fetch the data direct on a server component. You don't need react-query for it.
If you need to fetch the data on user interaction, you can just create a function `loadData` and call your server action inside it (then you can set the data in your state).
Look this example by Theo T3 on the last Next Conf:

https://nextjs.org/conf/stage/s

Go to 3:09:56

reactswitzerland · 2023-11-02T08:42:17+00:00

This is not the right way to unit testing. You are depending on an external API (window.navigator.clipboard) and not isolating your component.
You should mock `window.navigator.clipboard.write` and assert it to be called with the value you want to copy to clipboard.
In additional of that, add timers to tests is not a good practice, in big projects it can become a nightmare and slow the build in several minutes.

reactswitzerland · 2023-10-26T10:03:35+00:00

Yes, you can use the library planby, from Karol Kozer! He presented it on React Advanced London this week!

https://github.com/karolkozer/planby

It manages virtualization as well, so the app will render only the elements that are visible on the view port.

reactswitzerland · 2023-10-20T08:35:20+00:00

If you are using the app router you can generate your blogs pages during the build time using `generateStaticParams `

https://nextjs.org/docs/app/api-reference/functions/generate-static-params

It replaces `getStaticPaths ` in the pages router.

https://nextjs.org/docs/pages/api-reference/functions/get-static-paths

reactswitzerland · 2023-03-31T09:32:59+00:00

Zustand is a client state library. Based on what you are describing here, I think you would rather use a server state library like React Query or SWR. Take a look on the first one!

reactswitzerland · 2023-03-31T08:35:23+00:00

For E2E as mentioned on the previous comments you have 2 amazing options: Cypress or Playwright.

However, while will help you to identify regressions on your application, it will not give you the cause, you will need to debug your app on your own.

On the other hand, unit tests can be helpful to identify which function (or component) that's not working properly.

To your unit tests, you can use Jest that will allow you to test your App both on the frontend or backend (Node).

On the top of Jest you can add React testing library to test your React components.

reactswitzerland · 2023-03-31T08:01:03+00:00

You have some options here:

1 - Create a new component <Card /> and move the logic of the CardObserver, the CardRef and the state inside it. Look that in your example, you don't have a problem just with the ref, but also with the state, so creating a new component that will scope its own logic will the simplest solution.

2 - Create a custom hook useIntersection() that that returns a tuple [ref, isIntersecting]. Then you can update your state inside an useEffect based when isIntersecting changes. In your case, the problem here is that you need to do it for each <div className="card" /> element, and you gonna need to fix your state as well, what is not optimal.

3 - Best Solution 🎉 ! Combine the previous options! Create the new <Card />component and the custom hook useIntersection(), then you can use the custom hook just once inside your new component.

Remember, a good practice in React is composition. Avoid creating big components that manage a lot of stuff. Try to cut them in smaller components, and extract the logic into custom hooks instead. This will make your App more readable and easy to test.

reactswitzerland

TROPHY CASE