svelte Architecture Docs
Home / Function/ create_effect() — svelte Function Reference

create_effect() — svelte Function Reference

Architecture documentation for the create_effect() function in effects.js from the svelte codebase.

Function javascript ClientRuntime Reactivity calls 6 called by 14

Entity Profile

Dependency Diagram

graph TD
  9764bb93_860c_6dee_2112_890b69ee0aa3["create_effect()"]
  1ae6fa4e_16ee_acdf_5e28_17eb0819fddb["effects.js"]
  9764bb93_860c_6dee_2112_890b69ee0aa3 -->|defined in| 1ae6fa4e_16ee_acdf_5e28_17eb0819fddb
  20340432_01a2_6741_abf4_60ccab51cdb3["teardown()"]
  20340432_01a2_6741_abf4_60ccab51cdb3 -->|calls| 9764bb93_860c_6dee_2112_890b69ee0aa3
  13759887_b861_b51d_34c2_eae058e70740["create_user_effect()"]
  13759887_b861_b51d_34c2_eae058e70740 -->|calls| 9764bb93_860c_6dee_2112_890b69ee0aa3
  b4142a92_fb70_a0da_ca48_719b2f2398ad["user_pre_effect()"]
  b4142a92_fb70_a0da_ca48_719b2f2398ad -->|calls| 9764bb93_860c_6dee_2112_890b69ee0aa3
  80b95503_e5bc_4965_f8d9_a5ec40e8e1c2["eager_effect()"]
  80b95503_e5bc_4965_f8d9_a5ec40e8e1c2 -->|calls| 9764bb93_860c_6dee_2112_890b69ee0aa3
  cf74814c_38ff_1817_80eb_cbc1bb490472["effect_root()"]
  cf74814c_38ff_1817_80eb_cbc1bb490472 -->|calls| 9764bb93_860c_6dee_2112_890b69ee0aa3
  0448eaeb_2934_f939_a81e_5b59a8c48202["component_root()"]
  0448eaeb_2934_f939_a81e_5b59a8c48202 -->|calls| 9764bb93_860c_6dee_2112_890b69ee0aa3
  a985ae40_8ef8_7ef2_adad_116fbf97e70c["effect()"]
  a985ae40_8ef8_7ef2_adad_116fbf97e70c -->|calls| 9764bb93_860c_6dee_2112_890b69ee0aa3
  b2eacc8a_e339_c7cd_329a_2445c4d5ac44["async_effect()"]
  b2eacc8a_e339_c7cd_329a_2445c4d5ac44 -->|calls| 9764bb93_860c_6dee_2112_890b69ee0aa3
  7494b934_a3b8_689e_91b6_8435e26461c5["render_effect()"]
  7494b934_a3b8_689e_91b6_8435e26461c5 -->|calls| 9764bb93_860c_6dee_2112_890b69ee0aa3
  cb33ef2f_2e6e_0042_436d_4ff6a84c5836["template_effect()"]
  cb33ef2f_2e6e_0042_436d_4ff6a84c5836 -->|calls| 9764bb93_860c_6dee_2112_890b69ee0aa3
  67fa511b_0187_f041_2ace_159bdaf811ae["deferred_template_effect()"]
  67fa511b_0187_f041_2ace_159bdaf811ae -->|calls| 9764bb93_860c_6dee_2112_890b69ee0aa3
  1bd7dd6f_4c22_6f44_9747_fc5ea0deaa7b["block()"]
  1bd7dd6f_4c22_6f44_9747_fc5ea0deaa7b -->|calls| 9764bb93_860c_6dee_2112_890b69ee0aa3
  a3686fa4_d487_d514_9dcd_bcbf5853b659["managed()"]
  a3686fa4_d487_d514_9dcd_bcbf5853b659 -->|calls| 9764bb93_860c_6dee_2112_890b69ee0aa3
  style 9764bb93_860c_6dee_2112_890b69ee0aa3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/reactivity/effects.js lines 86–173

function create_effect(type, fn, sync) {
	var parent = active_effect;

	if (DEV) {
		// Ensure the parent is never an inspect effect
		while (parent !== null && (parent.f & EAGER_EFFECT) !== 0) {
			parent = parent.parent;
		}
	}

	if (parent !== null && (parent.f & INERT) !== 0) {
		type |= INERT;
	}

	/** @type {Effect} */
	var effect = {
		ctx: component_context,
		deps: null,
		nodes: null,
		f: type | DIRTY | CONNECTED,
		first: null,
		fn,
		last: null,
		next: null,
		parent,
		b: parent && parent.b,
		prev: null,
		teardown: null,
		wv: 0,
		ac: null
	};

	if (DEV) {
		effect.component_function = dev_current_component_function;
	}

	if (sync) {
		try {
			update_effect(effect);
			effect.f |= EFFECT_RAN;
		} catch (e) {
			destroy_effect(effect);
			throw e;
		}
	} else if (fn !== null) {
		schedule_effect(effect);
	}

	/** @type {Effect | null} */
	var e = effect;

	// if an effect has already ran and doesn't need to be kept in the tree
	// (because it won't re-run, has no DOM, and has no teardown etc)
	// then we skip it and go to its child (if any)
	if (
		sync &&
		e.deps === null &&
		e.teardown === null &&
		e.nodes === null &&
		e.first === e.last && // either `null`, or a singular child
		(e.f & EFFECT_PRESERVED) === 0
	) {
		e = e.first;
		if ((type & BLOCK_EFFECT) !== 0 && (type & EFFECT_TRANSPARENT) !== 0 && e !== null) {
			e.f |= EFFECT_TRANSPARENT;
		}
	}

	if (e !== null) {
		e.parent = parent;

		if (parent !== null) {
			push_effect(e, parent);
		}

		// if we're in a derived, add the effect there too
		if (
			active_reaction !== null &&
			(active_reaction.f & DERIVED) !== 0 &&
			(type & ROOT_EFFECT) === 0
		) {

Domain

Subdomains

Defined In

Calls

Called By

Source

Frequently Asked Questions

What does create_effect() do?
create_effect() is a function in the svelte codebase, defined in packages/svelte/src/internal/client/reactivity/effects.js.
Where is create_effect() defined?
create_effect() is defined in packages/svelte/src/internal/client/reactivity/effects.js at line 86.
What does create_effect() call?
create_effect() calls 6 function(s): child, destroy_effect, push, push_effect, schedule_effect, update_effect.
What calls create_effect()?
create_effect() is called by 14 function(s): async_effect, block, branch, component_root, create_user_effect, deferred_template_effect, eager_effect, effect, and 6 more.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free