Blog

First impressions of using CursorAI

Apr 10, 2025

I’ve been using Cursor for 3 weeks, and I’m really impressed. Of course, it is not ideal and it doesn’t replace a human developer (for now), but it can help in a lot of ways.

TLDR

• Use AI for writing tests, but add clear instructions
• Generating types from response is very handy
• Get explanatory diagrams in a snap

My favorite uses for it are writing tests with instructions, creating TS types, and drawing diagrams. Let’s look closer at each case.

Writing tests

Not all developers love to write unit and integration tests. I personally lose my inspiration when I need to create a lot of mocks, do some routine tasks for preparing the test environment and try to make everything work with components or other libraries.

And that’s the place where AI shines! Of course not without a helping hand, but…

How I improved results of generation

• created mdx files with instructions for writing tests with examples (separate files for unit and integration tests)
• described the flow: AI ought to write tests, after that run them and check results. If there are failed tests, AI fixes them
• run command write tests for ... and add relevant instructions to the context

Of course, there is still a lot of work with reviewing, but with mocks and setting up environments it helps a lot.

Generating types

When you get a new endpoint and add it to your application, you need to describe types. In all our projects we use TypeScript, and before starting to use AI I created types manually (there is Swagger only on some of the projects). But now… I just need to give the API response to AI and describe what it is and some constraints — and after a few minutes I have generated types. There is room for improvement, but it speeds me up a lot.

Diagrams

I love diagrams, and I believe that it is easier to understand processes and technical details from diagrams and schemes, not from plain text. And I explored a whole new world for me with this prompt: @project explain how is ___ implemented and draw a scheme of how ____ works. I can read and have a mermaid diagram (I just copy and paste in an online mermaid editor) in front of my eyes — it has simplified a lot.

Summary

For now AI helps a lot, but it is very much like a junior developer. If you give it very clear and accurate instructions — it will do the work. But sometimes it doesn’t know something and wants to do less.

We need to develop our review mindset and our expertise to control AI and create effective and maintainable solutions with a helping hand from technologies.

Tags:

• Cursor
• AI
• diagram

Tag b or not b...

Apr 7, 2025

I’ve been refactoring our codebase, and it seems like my colleagues from the past were very fond of the <b> tag. They’ve used it a lot. I am not a big fan, especially of code like this:

.component b {
    font-weight: normal;
}

But maybe there is some reason why these guys applied it everywhere? Let’s research a little!

<b> now

I knew that <b> was for Bold. As I found out, now this is not the case. The HTML5 specification says:

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

And adds:

The b element should be used as a last resort when no other element is more appropriate.

For me, it is a really confusing tag now: there are some ideas about appearance (and browsers support it), but <b> is not about appearance. Issues with this tag are presented in the W3C article “Using <b> and <i> elements”.

I plan to get rid of <b> in most places of my code and try to use h1-h6, em, strong or mark — a pretty wide choice!

Tags:

• HTML
• semantic
• tag

When you need re-render, but it doesn't happen...

Mar 14, 2025

TL;DR

If component should re-render on url changes — use useLocation or useParams. useHistory will not help you, because history object is stable reference, so all pushes and changes are not tracked by React.

I already have had this issue and was surprised by this behaviour, but I forgot this — and wasted 2 hours on debugging. I suspected component’s library, checked contexts, and tried to find problems in composition.

So, what happened? In our App.tsx:

<Router history={history}>
    <UuiContext.Provider value={services}>
        <Header />
        <Routes />
        <Footer />
    </UuiContext.Provider>
</Router>

In Header.tsx — navigation:

// it's component from library, responsible for highlighting active menu item
// use uuiContext from UuiContext.Provider and check is link active using history
<MainMenu>
    <MainMenuButton caption='Home' link={{pathname: '/' } />
    <MainMenuButton caption='Dashboard' link={{pathname: '/dashboard' } />
</MainMenu>

And it works… almost. When you click on buttons in MainMenu url is updated, content is re-rendered. But there is no highlighting for active menu item in MainMenu.

Started with MainMenu.tsx: add breakpoint in function defining is link active. But on button clicks and changing url this function is not called. And component is not re-rendered.

Add console.log(‘render’) in Header.tsx. So, it is also not re-rendered. Despite updating the history object, and seeing those updates reflected in uuiContext.uuiRouter.history, nothing was triggering a re-render. Why don’t children of UuiContext.Provider update?

At this point, I went down a rabbit hole: tried to debug in contexts, because I thought that I have several instances and something weird happens. Found nothing, of course.

But after all this debugging, idea occurred to me: content is re-rendered because of changing actual Route, what if I put Header in corresponded pages? It worked, but in this case Header unmounted and mounted each time route changes. It’s not good user experience.

And then finally I asked right thing: how React and React Router define, what should be re-rendered? Results of answering on this question:

• we update history
• history object is stable reference, so you cannot track changes with useEffect and history.location dependency
• but useLocation and useParams watch changes location, and when we use them — our component re-renders after changes

So I just added to Header.tsx:

useLocation();

//...same code

Note

From documentation of React Router: «Returns the current Location. This can be useful if you’d like to perform some side effect whenever it changes»

The most annoying thing about that I already have solved problem like this, but remembered about it only when I found solution again. Writing it down this time so I’ll remember 🤪

Tags:

• react
• react-router

The big re-renders myth

Feb 25, 2025

Have you ever heard that writing code like this:

    <Component levels={[1, 2, 3]} />

is bad practice because the levels array is recreated in JSX every time, causing unnecessary re-renders of Component? And that you should use useMemo (like const levels = useMemo(() => [1, 2, 3], [])) or declare it outside the component?

I’ve heard this advice many times. And I followed it.

Even when I encountered cases where passing a ref object as a prop and then updating the ref didn’t trigger a re-render, I didn’t question it. I just hadn’t connected the dots — if a component always re-renders when its props change, then it should work the same way with ref, right?

Now, while reading Advanced React by Nadia Makarevich, I came across one of the most common misconceptions in React:

The big re-renders myth: Component re-renders when its props change.

React updates when a state update is triggered. In that case, it will re-render all nested components, regardless of whether their props have changed.

In the context of re-renders, whether props have changed or not on a component matters only in one case: if the said component is wrapped in the React.memo higher-order component.

Check this out with code: https://codesandbox.io/p/sandbox/props-rerender-dcq97c.

That’s it! We need to shift our thinking paradigm — from focusing on prop changes to analyzing state updates.

Summary

React updates when a state update is triggered. Props changes matter in case when component is wrapped in the React.memo.

Watch you state 😎

P.S. For constant arrays/objects, I personally prefer defining them in a separate constants.ts file. But that’s a matter of taste, not re-renders.

Tags:

• react

Do you like to solve puzzles on the interview?

Feb 6, 2025

I like solving problems, especially if it is not about losing context or something about classes, and more about logic and data structure. In general, I almost always excited about live-coding, especially when there is interesting problem.

That’s why when I saw announcement of a lecture about mathematical problems from IT-interviews with math teacher Boris Trushin (famous for his [YouTube channel where he explains math in a very understandable way] (https://www.youtube.com/@trushinbv)) I decided to attend it.

It was interesting, we discussed 7 problems (a couple of them were not from interviews, but that’s okay). I noted what could help me find solutions to similar problems in the future ;)

Summary

• trying to solve for easiest case
• try to find out what is the easiest case for us and how to reach it
• ask an additional question, that can help find the answer to the main one

Blue-eyed islanders

You can find puzzle here.

Approach

Try to solve for easiest case when there is only 1 person with blue eyes. Then with 2 blue-eyed islanders.

Note, what moved all this guys to solve the riddle about eye color (common knowledge about 1 person with a blue eyes)

2 eggs and 100 floors

Suppose that we wish to know which stories in a 100-storey building are safe to drop eggs from, and which will cause the eggs to break on landing. What strategy should be used to drop eggs such that a total number of drops in the worst case is minimized and we find the required floor

• An egg that survives a fall can be used again.
• A broken egg must be discarded.
• The effect of a fall is the same for all eggs.
• If an egg breaks when dropped, then it would break if dropped from a higher floor.
• If an egg survives a fall then it would survive a shorter fall.

Approach

When one egg is broken, we need to iterate floors 1 by 1 with second. We can try to find equal range that will be okay.

But with equal ranges (check n, after than 2n, then 3n) it means for second egg the number of tests does not decrease (it always remains n - 1). It should be optimized.

Try to imagine ideal case: in last attempt we need to test only 1 floor. Use it as a starting point and try to figure out how to reach it.

Circular train

You find yourself in a train made up of some unknown number of connected train cars that join to form a circle. It’s the ouroboros of transportation. Don’t think too hard about its practical uses.

From the car you’re in, you can walk to a car on either side — and because the train is a circle, if you walk far enough eventually you’ll wind up back where you started. Each car has a single light that you can turn on and off. Each light in the train is initially set on or off at random.

What is the most efficient method for figuring out how many cars are in the train?

Approach

Explanation in Russion, and again we start with the simpliest case - 1 car, and then try to solve it for 2, 3… cars. We need to find out what might serve as a marker of visited car.

Light and 100 prisoners

100 prisoners are sentenced to life in prison in solitary confinement. Upon arrival at the prison, the warden proposes a deal to keep them entertained, certain that the prisoners are too dim-witted and impatient to accomplish it.

The warden has a large bowl containing the cell numbers of all the prisoners. Each day he randomly chooses one cell from the bowl, the corresponding prisoner is taken to the interrogation room, and the cell number is returned to the bowl.

While in the interrogation room, the prisoner will not be allowed to touch anything except the light switch, which the prisoner may choose to turn on or off.

The prisoner may make the assertion that all 100 prisoners have been in the room. If the prisoner’s assertion is correct, all prisoners will be released. If the prisoner is incorrect, the game is over and their chance to be freed is gone.

The prisoners are given one meeting to discuss a strategy before their communication is completely severed. What strategy should they adopt in order to ensure, with 100% certainty, that one of them will guess correctly and all be freed?

The initial state of the light is OFF when the first prisoner enters the room.

Approach

Explanation in Russion, you should think about 2 things:

• we need person who will be responsible for counting (counter)
• how to ensure that every prisoner is counted only once

Tags:

• puzzle
• interview

Older posts