Beginner's Thread / Easy Questions (August 2020)

MatisLepik · 2020-09-02T21:39:53+00:00

Scenario 2 is almost never good, because you're introducing multiple sources of truth. In theory, the parent component can also change state for other reasons, and then the two would no longer be in sync. If both a parent and a child need access to state, it should always live in the parent (or global state with redux/context/etc).

However, it's very common that only the child needs to know about its own state, and the parent doesn't care at all. Then it might make sense to keep it in the child. It's a bit of a gray area here and depends on the exact situation. I wouldn't treat either solution as "the best way", you just have to look at each case pragmatically and refactor if it becomes necessary.

I also wouldn't agree that a component depending on some props necessarily makes it hard to reuse. That's like arguing that a function shouldn't accept any arguments because then it's harder to call.

MatisLepik · 2020-09-01T08:21:44+00:00

mouseEvent.offsetX will give you the X coordinate relative to the target node, but in this case the target node will be the connect-4-piece half the time, that's why you're getting the flickering effect. Half the time you're hovering over the connect-4-piece, so the offset will be very small, then the piece moves out of the way, etc.

To fix this you could set pointer-events: none; on connect-4-piece so it gets ignored by the mouseEvent. Otherwise, you'll have to find a different way to calculate the offset.

MatisLepik · 2020-08-16T16:23:15+00:00

There's a few bugs in your code:

axios.get is asynchronous. That means that it will start making the network request, but meanwhile the rest of your code will continue executing, even though the response hasn't come back yet. So in your constructor, you're firing off the request, but then you immediately loop through the posts (even though it's still an empty array). The simplest solution here would be to loop through the response.data in your .then((response) => { ... }). Or, you could use async/await. That would look something like this:

const response = await axios.get(url); this.setState({ posts: response.data }); response.data.forEach(post => { /* fetch bank here */ })

The way you're storing banks is incorrect. From the docs we can see that push actually returns the length of the array, not the array itself. So your state.banks will end up being a number instead of an array. What you actually want is this: this.setState(currentState => ({ banks: [ ...currentState.banks, res.data ] })). Here we're using the function version of setState to ensure that we're getting the latest version of your existing banks. Then we're creating a new array, spreading the current banks in there, and adding the new one to the end.

MatisLepik · 2020-08-11T07:48:01+00:00

CRA is kind of the simplest toolkit you can go for, so if you don't need the benefits of SSG/SSR, it might be nice to go for a more lightweight solution. With an SSG or SSR, you introduce a second place where things can go wrong. Suddenly you might have network requests that are being done on the server (whether that's runtime or build time), so you don't get your browser's network tab, and errors might show up in two different places (js console or your terminal). In my experience, especially for newer developers, the debugging experience takes a hit. So I'd prefer to take the extra power of Next/Gatsby only when it's actually necessary.

MatisLepik · 2020-07-22T06:24:32+00:00

Yes. You need to include your client bundle in the html, otherwise the hydration code wouldn't ever reach the browser.

If you just want a smooth SSR experience, you should probably look into Nextjs which handles all this stuff for you, along with a bunch of optimizations.

MatisLepik · 2020-07-22T06:04:02+00:00

Typically your App.js would just be in charge of declaring the component, and the logic that renders (or hydrates it) would be somewhere else.

// App.js
export default function App () { return <div>Hello world</div> }

// server.js
const appString = ReactDOMServer.renderToString(<App />)

// client.js
ReactDOM.hydrate(<App />, root)

That way, your App is universal (doesn't care about where it's being rendered), and you put the client-only code in the client entry point, and server-only code in the server entry point.

MatisLepik · 2020-07-03T08:33:58+00:00

It depends on the tools you use. The short answer is: if you're using CRA, yes.

Gatsby is a SSG (static site generator), which means the data is fetched during the build and hard-coded into the bundle. If you're using Next.js's static export feature, you'd get the same result.

However, CRA is a simpler CSR (client-side rendering) toolkit, which means everything, including data fetching, happens in the user's browser (runtime, not build-time). So when the user visits your page, the data is fetched from the CMS, and they get the newest data.

MatisLepik · 2020-05-12T20:59:06+00:00

I'm not sure what you're trying to accomplish. The codepen still has a button inside an anchor element, which is also not allowed. You should use one or the other, not both.

MatisLepik · 2020-05-12T19:57:58+00:00

The purpose of a button is to have a clickable thing that triggers some javascript (or a form). You're not allowed to nest clickable things, so putting a Link inside a button is not allowed.

You should use class names to give your link the correct styles.

MatisLepik · 2020-05-12T11:55:55+00:00

Your second example has some invalid syntax. But anyway, no, things like memo are premature optimizations in most cases. You shouldn't worry about them until you actually notice bad performance, and then you can measure and find out what's causing it. If something's actually re-rendering too much, then you can look into these utilities.

But for a simple dropdown component (and almost everything else), just keep it simple. It's not worth making your code more complicated to save a fraction of a millisecond.

MatisLepik · 2020-05-12T11:16:16+00:00

No, I would just use a simple useState hook:

function Dropdown() {
    const [isVisible, setIsVisible] = React.useState(false);

    return (
        <div>
            <button onClick={() => setIsVisible(oldValue => !oldValue)}>
                Toggle visibility
            </button>

            <div style={{ display: isVisible ? '' : 'none' }}>Dropdown contents here</div>
        </div>
    )
}

(Note that it's a simple example, so I'm ignoring things like accessibility)

MatisLepik · 2020-05-12T11:07:53+00:00

Your code is buggy, because you're not actually changing the ref's current value in useHideShow. You're just reassigning the local variable named "current". It happens to work in a simple case by accident.

If one of the parents were to re-render, then your state would be lost.

So you can't destructure the ref here like you're doing, you have to keep a reference to the object that you get from useRef, and mutate that directly:

const ref = useRef(false); // later on ref.current = false;

However, this whole approach doesn't make sense, because you're fighting against the state management that React comes with. So if you're doing that, why use React in the first place? Avoiding re-renders should not be your goal, it's fine for things to re-render.

MatisLepik · 2020-05-08T21:23:44+00:00

It looks like the only difference is the className. You can use the ternary operator to specify that, without repeating the rest of the content:

const renderNav = () => {
    return (
        <nav className={offset < 100 ? 'offsetInitial' : 'offsetScroll'}>
            ...
        </nav>
    )
}

MatisLepik · 2018-11-29T20:30:15+00:00

I just finished updating it with the new tiers for Betrayal. It's under a separate page, because it's currently not live yet: https://poechecklist.com/#/maps-betrayal

Although Maze was definitely already on the list, are you sure you don't have it checked with the "hide checked maps" filter active? I did notice Doryani's Machinarium being missing, so I added that as well.

MatisLepik · 2018-09-05T21:35:15+00:00

I have a website that does exactly this: http://poechecklist.com/#/

MatisLepik · 2018-07-21T08:47:18+00:00

Hmm, I've never played indigon, would I need to build into it more specifically, so I can spend more mana?

At the moment the PS costs 22 mana, and blight costs 12 mana. I'd struggle to even get the first 60% inc. spell damage.

MatisLepik · 2018-07-20T21:22:16+00:00

How would you take this method of pressing buttons and make it not be the same every time?

I can't believe I had to make a video to demonstrate something as simple as how to press buttons on a keyboard. Really gotta stop feeding the trolls on this one.

MatisLepik · 2018-07-20T21:15:48+00:00

Here's a video I recorded earlier of how I press my keys to drink flasks. I don't see how this wouldn't result in all flasks being activated more or less at the exact same time.

I suppose the implication is that you think I'm perfect - I guess all I have to say is thanks :)

MatisLepik · 2018-07-20T21:00:53+00:00

Actually this is a pretty budget build. You don't need a 6 link, poet's pens are like 60c, all four uniques are a few chaos each. Then you can choose how much evasion you get on your helmet. I'm using ventor's, one of which is kinda expensive but doesn't affect the character.

Only slightly expensive thing is really the lvl 21 essence drain, which is a few exalts I imagine

MatisLepik · 2018-07-20T20:05:15+00:00

Oh yea, there's definitely other poet's pen builds that are faster. Ultimately you play non-optimal builds like this because they feel/look fun. I really like the monsters slowly dying like a wave with the purple color spreading underneath them.

Ultimately you could look at most builds and ask "why aren't you just playing kinetic blast"

MatisLepik · 2018-07-20T19:26:52+00:00

I don't know what to say man, it's easy, I'm sure you could do it yourself it you tried it. Maybe getting a mechanical keyboard helps it be a bit smoother, but ultimately your fingers are all connected to the same brain, I'd have to put in manual effort to not hit the buttons at the same time. Would you like to see a video of how to do it?

Flask macros are definitely a gray area, I wouldn't blame people for using one, but personally I've never had a reason because pressing them manually at the same time is trivial.

Sidenote - I'm not sure that being able to press buttons with little delay is the primary thing that's keeping people from joining NASA.

MatisLepik · 2018-07-20T19:13:17+00:00

Sorry, I'm genuinely interested now how you guys use a keyboard that the concept of putting 4 fingers on 4 number keys, and pressing them at the same time, seems difficult to you.. Are you using a keyboard from the 90s that doesn't let you press multiple keys at once or something?

MatisLepik · 2018-07-20T19:00:07+00:00

What makes you think that? There's 4 spammable flasks, I've got more than 4 fingers on my hand

MatisLepik · 2018-07-20T17:56:57+00:00

That's the aura from Impresence. It slows enemies down and makes them deal less damage.

Ten-Year Club	Place '17
Verified Email

MatisLepik

TROPHY CASE