I'm using next-i18next to translate my Next.js pages. I'm wondering if using
const { t } = useTranslation('common') everywhere for each react component would have a negative impact on performance. The alternative would be calling it in the parent and passing it down to the children which IMO is not a smart solution since it add an extra prop to each component.
It is the way to do it.
The alternative as you describe it, passing the function itself as a prop, is essentially the same thing. It would just point to a reference of the original function.
But, passing it as a prop would likely add more overhead to react internally as the rendering process would need to find out if that prop changed, on every component it passes through.
Using t() as destructured from a hook, you would just call a reference to the function, nothing more.
Related
I suppose there are already existing answers and I will thank you even if you just paste the link for the existing thread. But anyway.
There are in React when I specify style prop I have pretty good autocompletion and validation.
For example
What do I want?
I want to implement the same logic for my variable.
For example, in the code below
const position: ProperType = 'staticcc';
I want to replace ProperType with a really suitable type. After which
VScode will underline position and told me that there are errors (because 'staticcc' is an invalid value for CSS position property)
VScode will propose autocompletion like in the screenshot above.
I suppose there should be a special library or smth like this with predefined types. I even have googled csstype, it works fine for objects which I suppose to pass as style props. But I need not object, I need a special type for special CSS property to assign to the special variable. And don't know-how.
install csstype and
import * as CSS from 'csstype';
const position: CSS.Property.Position = 'static'
Is there a way to check if a specific Template has been rendered, other than by using Sessions, i.e. the Template is accessible for other external functions to use?
A good example is that I want to use Blaze.renderWithData, but need to know that the Template is availabel beforehand.
If you want to see if a template has been rendered, put a flag in the onRendered callback. If you don't like Session vars use a reactive var or dict & include the inverse in the onDestroyed. Store that reactive-whatever under your package object's global. As an alternative, if you know where it might be rendered to, you can use Blaze.getView on the element where it should appear and if it returns, you know you have it, e.g. Blaze.getView($('.foo')[0])
Also consider asking yourself why you can't use spacebars or embed the rendering directly in the onRendered callback. Using Blaze.renderWithData is fairly uncommon.
In Meteor, if the below is my HTML,
<template name="myTemplate">
The value is {{value}}
</template>
I can define the value in two ways
Template.myTemplate.helpers
value: ->
'insideHelper1'
Template.myTemplate.value =
'outsideHelper1'
The first way is using helpers as documented here (http://docs.meteor.com/#template_helpers) whereas the second way is using the Live Template examples as defined here (http://docs.meteor.com/#livehtmltemplates)
Just wondering, what is the difference between the two and when should I use one over the other?
They're exactly the same.
If you use .helpers, it actually just adds it to Template..
It depends on your coding style. You may prefer to use .helpers since it makes cleaner code if you have many helpers on the same template.
One small technically way they're different is Template.helpers adds the helpers to your Meteor app when your Meteor app starts up, whereas using the Template.helpername adds it before. So if you need to overwrite any helpers, you could use the .helpers method. The one that runs last will have the active helper.
Is there a way to include an existing dom-element through Handlebars, while being able to keep a reference to said dom-element?
to explain:
I have a jquery-element $el of which I want to include the dom-element ($el[0]) in a handlebars template.
I have some jquery code that uses $el.html("new stuff") after handlebars has included the template (again: this template contains $el[0]
The usual solution would be to rewrite the code by providing a selector so jquery can access the element. However, the code that needs to change $el doesn't know where in the template $el[0] will be used, since this is configurable. Having to specify the selector by config is possible obviously but this doesn't really feel dry to me.
So, any way to do this?
I implemented this with a handlebars helper that injects a unique id and post-render keeps a ref from uniqueid -> element to bind.
On postrender I simply find the elements with the unique-ids and update each element to it's mapped el to bind.
I am using findOne just to fetch one certain element for my collection.
However, when I do that, all my template functions containing those collections are re-run and the content refreshed. The content is similar, the problem is I am applying styles to some of those elements, and these updates just reset everything as well. More importantly: those refreshes are completely useless.
For example, I have this template:
Template.content.cars = function () {
alert("I AM RERUN!");
return Cars.find();
};
And in another function, I am doing this:
Cars.findOne({ _id: Session.get('current_car') }, {});
Why would be the first template re-run? Am I doing something wrong?
I'm not sure why your first template would be re-run: are you sure something else isn't going on?
But as a general non-answer to your question: you should expect that a template which depends on the entirety of a collection will be re-run many times (for instance as the data loads incrementally when the page first renders). With meteor you need to write your HTML/CSS in such a way that this re-rendering won't cause problems.
Without knowing more about your problem I can't really say more than that.